如果会有溢出，让 div 扩展到底部 [重复]

Question

所以我建立了一个网站，我在上面实现了一个信使盒。我希望溢出强制 div 将其高度扩展到页面底部。 现在看起来像这样：

html 结构应该是这样的：

<div class="chat">
<div class="message-box">
<div class="others-message">Wie gehts</div>
<div class="my-message"></div>
<div class="others-message"></div>
</div>
...

这是我的css代码：

.chat{
grid-area:chat;
width:400px;
height:600px;
border-radius: 25px;
display:inline-block;
vertical-align:top;
}

.message-box{
display:inline-block;
clear:both;
overflow:auto;
position:relative;
width:360px;
height:75%;
margin:10px;
margin-top:60px;
border-radius:5px;
background-color:#f0ffff;
-webkit-box-shadow: 0px Opx 12px -2px #000000;
box-shadow: Opx Opx 12px -2px #000000;
}

.my-message{
position:relative;
text-align:left;
color:white;
background-color:blue;
border-radius:20px;
padding:10px;
margin:10px;
width:70%;
}

.others-message{
position:relative;
text-align:left;
color: white;
background-color:grey;
border-radius:20px;
padding:10px;
margin:10px;
margin-left:100px;
max-width:70%;
min-height:40px;
}

Answer 1

在消息类选择器上使用word-wrap: break-word。

word-wrap 属性允许长词被打断 换行到下一行。

Answer 2

您可以尝试在 CSS 的 my-message 和 others-message 类中添加 width 和 overflow 属性。