CSS – Div container increasing with overflow auto

Issue

I have a card with three list containers inside like this:

<div class="card-body">
    <div class="list-container">
        <span class="list-name">List1</span>
        <div id="list1">
        </div>
    </div>
    <div class="list-container">
        <span class="list-name">List2</span>
        <div id="list2" >
        </div>
    </div>
    <div class="list-container">
        <span class="list-name">List3</span>
        <div id="list3">
        </div>
    </div>
</div>

the list-container class is the following:

.list-container {
    height: 29%;
    width: 100%;
    max-height: 29%;
    display: inline-block;
    overflow: auto;
    box-shadow: 0 0 7px darkgray;
    margin-bottom: 10px;
    border-radius: 10px;
}

My problem here is with the overflow, it increases the size of the lists containers and make the go out of the card.

When I fill the first list it works well, but when filling any of the others, when the overflow starts it increases the size of the containers like in the picture.

we can see that the button is outside the card because of the height increase of the containers

What I’m missing here?

Solution

height with a percentage as value means as many % as the parent. However that requires that the parent has a fixed/defined height and not a calculated height (to fit-content). So unless you declare a specific height to the parent, the max-height-proeprty will never trigger:

body {
  margin: 0;
}

div {
  max-height: 25%;
  overflow-y: auto;
}

.defined-height {
  height: 100vh;
}


/* for visualization purpose only */
div {
  box-sizing: border-box;
  border: 2px dashed red;
  padding: 10px;
}
<button onclick="document.body.classList.toggle('defined-height');">Click me to set a defined height to parent</button>
<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

Answered By – tacoshy

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.