Prevent 100% height div from growing out of parent

Question

How do i prevent a div with a dynamically sized list growing too large? when the number of items in the list is small, the div is correctly sized, but when i add more items, the div containing the list grows even though it has overflow: auto on it.

If you copy in more list items in this jsfiddle https://jsfiddle.net/kdqajmt1/106/ the outer page wrapper begins to also scroll, which i dont want.

html, body{
    padding:0;
    margin:0;
    height:100%;
    
}

header {
  text-align:center;
  position: fixed;
  width: 100%;
  border: 1px black solid;
  height: 30px;
}

.wrapper {
        height: 100%;
        width: 100%;
    border: 1px red solid;
    padding-top: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    box-sizing: border-box;
    }

    h3 {
        margin-right: 20px;
    }

    .list-container {
        display: flex;
        flex-direction: column;
        padding: 20px;
        width: 50%;
        height: 100%;
    }

    .list {
        height: 100%;

        overflow-y: auto;
        overflow-x: hidden;

        border: 1px black solid;
    }

<header>header</header>
<div class="wrapper">
  <h3>my list</h3>
  <div class="list-container">
    other stuff
    <div class="list">
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>

        
    </div>
  </div>
  <div class="btn-wrapper">
    <button>
      btn1
    </button>
    <button>btn2</button>
  </div>
</div>

min-height: 0 to list-container – Temani Afif Jul 16 '23 at 08:31 — Temani Afif, Jul 16 '23 at 08:31

score -1 · Answer 1 · answered Jul 16 '23 at 06:58

you need set postion .

.list-container {
        display: flex;
        flex-direction: column;
        padding: 20px;
        width: 50%;
        height: 100%;
       margin-top:50px;
       position:relative;
    }

    .list {
height:100%;
width:50%;
        overflow-y: auto;
        overflow-x: hidden;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
        border: 1px black solid;
    }

honest888 · Answer 2 · 2023-07-16T08:09:21.487

I can understand your situation.

You can select the max-height for your special div element.

div .list { max-height: 200px; }

In CSS, height 100% is dynamic. So, if you want to set the percentage of value of height, you have to define the all parent component's height with static (position:static).

In your code, .list-container have the display flex. So, you can't set the correct percentage of height.

Also, you have to calculate the height correctly. For example you set the height 100% for all elements. But in your code h3 tag. So, in this case, you see the overflow.

Also, you have to add the over-flow: hidden for your div tag.

So, I have added the example for your

html, body{
    padding:0;
    margin:0;

<!-- begin snippet: js hide: false console: true babel: false -->

<header>header</header>
<div class="wrapper">
  <h3>my list</h3>
  <div class="list-container">
    other stuff
    <div class="list">
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
         <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        
    </div>
  </div>
  <div class="btn-wrapper">
    <button>
      btn1
    </button>
    <button>btn2</button>
  </div>
</div>

    height:100%;  
}

header {
  text-align:center;
  position: fixed;
  width: 100%;
  border: 1px black solid;
  height: 30px;
}

.wrapper {
        height: 100%;
        width: 100%;
    border: 1px red solid;
    padding-top: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    box-sizing: border-box;
    }

    h3 {
        margin-right: 20px;
    }

    .list-container {
        padding: 20px;
        width: 50%;
        height: 70%;
    }

    .list {
   
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;

        border: 1px black solid;
    }

code.

Prevent 100% height div from growing out of parent

2 Answers2