Pawel Wasiliuk Pawel Wasiliuk - 26 days ago 11
CSS Question

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

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>




Answer

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

Comments