Question 208811 in Html Question posted in
Some basic documentation can be found here.

Html – Prevent 100% height div from growing out of parent

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>
Tags:

2

Answers


  1. 0

    To prevent your div from growing too large, you can set maxHeight on list class.

    For example:

    .list {
    height: 100%;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px black solid;
}

    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%;
        max-height: 100px;

        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>
        <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>
    Login or Signup to reply.
  2. 0

    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;
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search