CODEWITHSUNDEEP
htmlcss
Abraham Arnold
Abraham Arnold

Reputation: 365

How make the div scrollable?

I am looking for a CSS solution for my HTML div scrolling issue. The div is not scrollable. I need <div class="chat" to be scrollable because it contains chat messages. I have tried overflow: auto; inside container .right .chat.active-chat but it is not working. Anybody can help me? Thanks in advance.

Here is the HTML part,

.container .right {
    position: relative;
    float: left;
    width: 62.4%;
    height: 100%;
}

.container .right .chat {
    position: relative;
    display: none;
    overflow: hidden;
    padding: 0 35px 92px;
    border-width: 1px 1px 1px 0;
    border-style: solid;
    border-color: #e6e6e6;
    height: -o-calc(100% - 48px);
    height: calc(100% - 48px);
    justify-content: flex-end;
    flex-direction: column;
}

.container .right .chat.active-chat {
    display: block;
    display: flex;
}
<div class="right">
   <div class="top"></div>
   <div class="chat" data-chat="person1">
      <div class="conversation-start">
         <span></span>
      </div>
      <div class="bubble you">
         Hi,
      </div>
      <div class="bubble me">
         Hello,
      </div>
   </div>
</div>

I got this from here. CodePen

Upvotes: 0

Views: 85

Answers (2)

davood Sandoghsaz
davood Sandoghsaz

Reputation: 684

You must put another div inside chat div and style it:

.container .right .chat {
    padding-bottom: 92px;
}
.container .right .chat.active-chat {
    display: flex;
}
.container .right .chat.active-chat > div {
    display: block;
    overflow-y: auto;
    padding: 0 35px;
    overflow-x: hidden;
}

Corrected link: https://codepen.io/sdssz1365/pen/jOLjJwr

Upvotes: 2

David Salomon
David Salomon

Reputation: 849

It's working for me, as long as you enter a fixed height for the container

.right{
background-color: #111;
color: #eee;
height: 75vh;
overflow-y: scroll;
border: 5px solid tomato;
}
<div class="right">
   <div class="top"></div>
   <div class="chat" data-chat="person1">
      <div class="conversation-start"> <span></span> </div>
      <div class="bubble you"> Hi, </div>
      <div class="bubble me"> Hello, </div>
            <div class="bubble you"> Hi, </div>
      <div class="bubble me"> Hello, </div>
            <div class="bubble you"> Hi, </div>
      <div class="bubble me"> Hello, </div>
            <div class="bubble you"> Hi, </div>
      <div class="bubble me"> Hello, </div>
            <div class="bubble you"> Hi, </div>
      <div class="bubble me"> Hello, </div>
            <div class="bubble you"> Hi, </div>
      <div class="bubble me"> Hello, </div>
            <div class="bubble you"> Hi, </div>
      <div class="bubble me"> Hello, </div>
            <div class="bubble you"> Hi, </div>
      <div class="bubble me"> Hello, </div>
            <div class="bubble you"> Hi, </div>
      <div class="bubble me"> Hello, </div>
            <div class="bubble you"> Hi, </div>
      <div class="bubble me"> Hello, </div>
            <div class="bubble you"> Hi, </div>
      <div class="bubble me"> Hello, </div>
            <div class="bubble you"> Hi, </div>
      <div class="bubble me"> Hello, </div>
            <div class="bubble you"> Hi, </div>
      <div class="bubble me"> Hello, </div>
            <div class="bubble you"> Hi, </div>
      <div class="bubble me"> Hello, </div>
            <div class="bubble you"> Hi, </div>
      <div class="bubble me"> Hello, </div>
            <div class="bubble you"> Hi, </div>
      <div class="bubble me"> Hello, </div>
   </div>
</div>

Upvotes: 2

Related Questions