Nested divs height and overflow

Question

Suppose I have some fixed-size container and I want all elements to fit inside, but I don't know all heights of inside elements. Some element has lots of text, so I set overflow: hidden. But this element ignores the height of container and just stretches to fit contents. How do I do it right?

Edit: if I set overflow on my container, overflowing text will be hidden, but bottom padding will be ignored (see 2nd snippet). How do I cut text 5px from the bottom border, so all sides look equal?

.outer {
  width: 200px;
  height: 200px;
}

.inner {
  padding: 5px;
  background-color: #ccc;
  height: 150px;
  border: 1px solid black;
}

.text {
  overflow: hidden;
}

<div class="outer">
  <div class="inner">
    <span style="color: red">Some element so we can't make text 100% height</span>
    <div class="text">
      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>
  <div>Some other text</div>
</div>

.outer {
  width: 200px;
  height: 200px;
}

.inner {
  padding: 5px;
  overflow: hidden;
  background-color: #ccc;
  height: 150px;
  border: 1px solid black;
}

.text {
  overflow: hidden;
}

<div class="outer">
  <div class="inner">
    <span style="color: red">Some element so we can't make text 100% height</span>
    <div class="text">
      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>
  <div>Some other text</div>
</div>

You need to set `overflow: hidden;` on the container, not on the text. (that is, on a container with fixed height) — Mike B., Oct 07 '18 at 18:15
`overflow:hidden` works with fixed size, there is no overflow on the text, the overflow is on the inner .. add border to better see — Temani Afif, Oct 07 '18 at 18:16
But then overflow ignores padding. I fixed my example. If you set overflow on 'inner', text will be cut close to the border, despite 5px padding. — dm33tri, Oct 07 '18 at 18:18
yes overflow behave like that, it hides the overflow outside the element not inside and padding belong inside — Temani Afif, Oct 07 '18 at 18:23
use margin instead of padding and make the background color to the outer div — Temani Afif, Oct 07 '18 at 18:25
this will help: https://stackoverflow.com/questions/33150835/overflow-hidden-behind-padding — Alireza, Oct 07 '18 at 18:32

score 1 · Accepted Answer · answered Oct 07 '18 at 18:28

You can nest an additional div inside of .inner (I used .inner2 in this example, you can come up with a more meaningful name! :) ).

Basically, you need to separate the background/border from the container that will control the overflow (as you're right, overflow goes to the edge of the element, it doesn't care about padding).

Just an example, but I added a second div (.inner2) inside of .inner and moved the the height and overflow rules to that one instead. The background/padding/border stay put.

Edit: Added a lime border to inner2 to better illustrate what's happening.

.outer {
  width: 200px;
  height: 200px;

}

.inner {
  padding: 5px;
  background-color: #ccc;
  border: 1px solid black;
}
.inner2 {
    height: 150px;
    overflow: hidden;
    border: 1px solid lime;
}

.text {
  
}

<div class="outer">
  <div class="inner">
  <div class="inner2">
    <span style="color: red">Some element so we can't make text 100% height</span>
    <div class="text">
      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>
  </div>
  <div>Some other text</div>
</div>

Nested divs height and overflow

1 Answers1