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.
– Mike B., Commented Oct 7, 2018 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
– Temani Afif, Commented Oct 7, 2018 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
– dm33tri, Commented Oct 7, 2018 at 18:18
yes overflow behave like that, it hides the overflow outside the element not inside and padding belong inside — Temani Afif
– Temani Afif, Commented Oct 7, 2018 at 18:23

Mike B. · Accepted Answer · 2018-10-07 18:28:41Z

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>

Collectives™ on Stack Overflow

Nested divs height and overflow

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related