CSS issue: overflow-y does not appear inside of the div in the nested div

Question

Dealing with a problem, that overflow-y does not appear in inner_messages div, which is located inside of chat_messages div, which is located in chat_big div. I want to create a scroll in the inner_div, and the technique I'm trying to use (that was described here) does not seem to work...

Is there any proper technique to use in my case?

body {
  height: 100%;
}

#chat_big {
  background: #ffffff;
  height: 100%;
}

#chat_messages {
  width: 700px;
  float: left;
  height: 550px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 5px solid #01abaa;
}

#inner_messages {
  width: 700px;
  height: 550px;
  font-size: 16px;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  font-weight: normal;
  background: #ffffff;
  color: #000000;
}

#user_list {
  height: 550px;
  overflow: hidden;
  background: #01abaa;
  color: #ffffff;
  border: 5px solid #fedc3d;
}

#chat_text {
  float:left;
  width:50%;
  height:55px;
  border: 5px solid #333;
  resize: none;
}

<div id="chat_big">
  <div id="chat_messages">
    <div id="inner_messages">
    </div>
  </div>
  <div id = "user_list">
  </div>
  <div>
    <textarea id = "chat_text" name = "chat_text"></textarea>
    <input type = "button" id = "send_message_button" value = "Send Message"/>
    <input type = "button" id = "user_info_button" value = "Show User Info"/>
    <input type = "button" id = "log_out_button" value = "Log Out"/>
  </div>
</div>

Krishna Maheswara · Accepted Answer · 2016-11-08 06:23:58Z

3

The above css what you have written is correct , scroll will come after 550px add more content inside inner_messages div you will get scroll.

If you want see scroll before 550px decrease the height of inner_messages and chat_messages

answered Nov 8, 2016 at 6:23

Krishna Maheswara

2412 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS issue: overflow-y does not appear inside of the div in the nested div

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related