让 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

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

Answer 2

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

The word-wrap property allows long words to be able to be broken and wrap onto the next line.

让 div 扩展到底部，如果有溢出

Let div expand to the bottom if there would be an overflow

html

css

chat

overflow