All geek questions in one place

How to make a div with auto height overflow?

I am stuck. I have a wrapper div on my page with a height set to some value. In this div, I have another height-set div (yellow). Under it there is a blue div, the height of which automatically grows with the content. I want this div to have a scrollbar when the content exceeds all available height.

question illustration

Here is an example you can play with:

.container {
  width: 200px;
  height: 300px;
  padding: 10px;
  border: 1px solid #888891;
}

.header {
  height: 40px;
  background-color: #FEEC63;
  margin-bottom: 10px;
}

.body {
  color: #fff;
  background-color: #63A4FE;
  overflow: hidden; /* why is that not hiding the excess text? */
}
<div class="container">
  <div class="header">
  Hi there!
  </div>
  <div class="body">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>
Run codeHide result

https://jsfiddle.net/674w4a09/

+4
source share
4 answers

add height: calc(100% - 50px);to .body and it will work

overflow did not work on div.body because height was not fixed

, calc, 10px margin-bottom

jsfiddle

+3

MDN:

overflow , (height, max-height) white-space nowrap.

, Flex, , :

.container {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 300px;
  padding: 10px;
  border: 1px solid #888891;
}

.header {
  height: 40px;
  background-color: #FEEC63;
  margin-bottom: 10px;
}

.body {
  overflow: hidden; /* switch to 'auto' for scrollbar */
  color: #fff;
  background-color: #63A4FE;
}
<div class="container">
  <div class="header">Hi there!</div>
  <div class="body">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>
Hide result
+1

height: calc(100% - 50px) .body

50px = 40px ( ) + 10px ( )

+1
    <!DOCTYPE html>
        <html lang="en">
            <head>
                <style>
                   .container {
  width: 200px;
  height: 300px;
  padding: 10px;
  border: 1px solid #888891;
  overflow: hidden;
}

.header {
  height: 40px;
  background-color: #FEEC63;
  margin-bottom: 10px;

}

.body {
  color: #fff;
  background-color: #63A4FE;
  height: calc(100% - 50px);
}

                </style>
            </head>
            <body>
                <div class="container">
                    <div class="header">
                        Hi there!
                    </div>
                    <div class="body">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </div>
                </div>
            </body>
        </html>
0

Source: https://habr.com/ru/post/1672289/

More articles:


All Articles