So im building a website on which i have a messenger-box implemented. I want the overflow to force the div to expand its height to the bottom of the page. For now it looks like this:
The html structure would be something like that:
<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>
...
Here is my css code:
.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;
}
Use word-wrap: break-word
on message class selectors.
The word-wrap property allows long words to be able to be broken and wrap onto the next line.