Pawel Wasiliuk Pawel Wasiliuk - 8 days ago 5
CSS Question

parent-div overflow-y breaks the border of a child-div

I have a fixed width and height of a parent-div block, inside of which is a child-div block (with the same width/height) that I am filling with users' messages. As the amount of messages increase, I want to be able to scroll down this block to see all the users' messages without breaking div block's border, which is currently happening. Is there any proper technique to try to be able to keep all the messages inside the div borders?

Please, take a look at the screenshot on how the problem looks like.

enter image description here



#chat_messages {
width: 700px;
float: left;
height: 570px;
overflow-x: hidden;
overflow-y: auto;
}

#inner_messages {
width: 700px;
height: 570px;
font-size: 14px;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-weight: normal;
background: #fedc3d;
color: #000000;
border: 5px solid #01abaa;
word-wrap: break-word;
white-space: initial;
}

<!doctype html>

<html>

<head>
<title>Test Page</title>
</head>

<body>
<div id="chat_messages">
<div id="inner_messages">
</div>
</div>
</body>

</html>




Answer

Your code is working . I have rearranged css a bit.

Codepen Link

HTML:

 <div id="chat_messages">
     <div id="inner_messages">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia numquam, consequuntur nesciunt non, voluptatem nostrum, ducimus rerum hic ipsum, cumque eius. Saepe et dolore odio illum a! Ad, amet, asperiores?loremLorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad repudiandae officiis soluta maiores, mollitia libero optio error quidem distinctio sed molestias doloremque asperiores assumenda beatae temporibus cum sit vitae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe repudiandae perspiciatis quidem non. Eos, in repellendus voluptas rem, voluptatibus numquam ipsa molestias quam id autem quas hic vero expedita tempora.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni doloribus, commodi libero deserunt nobis error necessitatibus officiis quaerat dicta ex obcaecati, quo laboriosam non nesciunt quod illum nihil eveniet dignissimos?
     </div>
   </div>

CSS:

#chat_messages {
    width: 700px;
    float: left;
    height: 100px;
    overflow-x: hidden;
    overflow-y: auto;
      font-size: 14px;
    font-family: "Lucida Grande", "Lucida    Sans Unicode", "Lucida Sans", Geneva,
     font-weight: normal;
    border: 5px solid #01abaa;
      background: #fedc3d;
}

#inner_messages {
    color: #000000;
    word-wrap: break-word;
    white-space: initial;
}
Comments