Search code examples
htmlcssoverflowchat

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


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:

enter image description here

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;
}


Solution

  • 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.