CSS问题：溢出-y不会出现在嵌套div的div内

Question

处理问题时，溢出-y不会出现在chat_messages div内的inner_messages div中，该div位于chat_big div中。我想在inner_div中创建一个滚动，并且我尝试使用的技术（描述为here）似乎不起作用...

在我的情况下是否有任何适当的技术使用？

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 1

以上的CSS你所写的内容是正确的，滚动会后550px 里面添加inner_messages更多内容的div你会得到滚动。

如果你想看到550px之前滚动降低inner_messages和chat_messages