How can I stop a <ul> element from overflowing the bounds of its container?

Question

I am trying to create a simple fixed-height box in CSS, with a title at the top, and an arbitrary-length list of elements below. I would like only the list to be scrollable, while the title remains visible and fixed at the top.

Here is a codepen:
https://codepen.io/anon/pen/qJRBpo?editors=1100

<div class="outerdiv">
  <h4>This is my title</h4>

  <div class="innerdiv">
    <ul>
      <li> List item 1 </li>
      <li> List item 2 </li>
      <li> [...] </li>
    </ul>
  </div>
</div>

I would think setting overflow: auto on either .innerdiv or ul elements would be enough, but these two elements seem to size themselves according to the content of the <ul> , completely ignoring the bounds of the .outerdiv box.

I have not found a way to constrain the .innerdiv or ul elements to grow no bigger than the size of .outerdiv . They always size themselves independently of the rest of the layout, and then, depending on the overflow: visible|auto setting on .outerdiv , the best I can do is clip or scroll the entire contents of the .outerdiv , including the title.

Answer 1

Use flexbox:

.outerdiv {
  height: 300px;
  display: flex;
  flex-direction: column;
  ...
}

.innerdiv {
  flex: 1; /* take available space */
  overflow: auto;
  ...
}

---

 .outerdiv { border: 1px solid black; margin: 10px; height: 300px; display: flex; flex-direction: column; } .outerdiv h4 { border-bottom: 1px dotted grey; margin: 0; padding: 20px; } .innerdiv { background-color: #9cfff14a; flex: 1; overflow: auto; } 

 <div class="outerdiv"> <h4>This is my title</h4> <div class="innerdiv"> <ul> <li> List item 1 </li> <li> List item 2 </li> <li> List item 3 </li> <li> List item 4 </li> <li> List item 5 </li> <li> List item 6 </li> <li> List item 7 </li> <li> List item 8 </li> <li> List item 9 </li> <li> List item 10 </li> <li> List item 11 </li> <li> List item 12 </li> <li> List item 13 </li> <li> List item 14 </li> <li> List item 15 </li> <li> List item 16 </li> <li> List item 17 </li> <li> List item 18 </li> <li> List item 19 </li> <li> List item 20 </li> <li> List item 21 </li> <li> List item 22 </li> <li> List item 23 </li> <li> List item 24 </li> <li> List item 25 </li> <li> List item 26 </li> <li> List item 27 </li> <li> List item 28 </li> <li> List item 29 </li> <li> List item 30 </li> </ul> </div> </div> 

Answer 2

Mb something like this:

.outerdiv {
  border: 1px solid black;
  margin: 10px;
  height: 300px;

  overflow: hidden;
}
.innerdiv {
  background-color: #9cfff14a;

  height: 100%;
  overflow-y: scroll;
}

Answer 3

 ul{ height:70%; overflow:auto; } .outerdiv { margin: 10px; } .innerdiv { background-color: #9cfff14a; height:70%; } .outerdiv{ height:200px; } 

 <div class="outerdiv"> <h4>This is my title</h4> <div class="innerdiv"> <ul> <li> List item 1 </li> <li> List item 2 </li> <li> List item 3 </li> <li> List item 4 </li> <li> List item 5 </li> <li> List item 6 </li> <li> List item 7 </li> <li> List item 8 </li> <li> List item 9 </li> <li> List item 10 </li> <li> List item 11 </li> <li> List item 12 </li> <li> List item 13 </li> <li> List item 14 </li> <li> List item 15 </li> </ul> </div> </div> 

Answer 4

The position:fixed is wahat you are looking for I think.

* {
    box-sizing: border-box;
}
.outerdiv {
    width: 170px;
    position: relative;
    border: 1px solid #ccc;
}
.outerdiv h4 {
    position: fixed; /* header fixed to top */
    top:0;
    margin: 0;
    padding: 8px;
    background: #fff; /* so you can't see items behind h4 when scrolling */
}
.innerdiv {
    overflow-x: hidden;
    overflow-y: auto;
}
.innerdiv ul {
    display: block;
    max-height: 100px; /* height of ul */
    margin: 0;
}
.innerdiv ul li {
    width: 100%;
    padding: 5px 10px;
}

Answer 5

Please see the example Code:

 .main{ border: 1px solid #000; margin: 0; padding: 0; position: fixed; width: 50%; } .outerdiv { position: fixed; background: #999; width: 50%; color: #fff; } .outerdiv h4{ padding-left: 28px } .innerdiv{ margin-top: 70px } .innerdiv ul { margin: 0; padding: 0; list-style:none; overflow-y: scroll; height: 300px } .innerdiv ul li{ margin-left:20px } 

 <div class="main"> <div class="outerdiv"> <h4>This is my title</h4> </div> <div class="innerdiv"> <ul> <li> List item 1 </li> <li> List item 2 </li> <li> List item 3 </li> <li> List item 4 </li> <li> List item 5 </li> <li> List item 6 </li> <li> List item 7 </li> <li> List item 8 </li> <li> List item 9 </li> <li> List item 10 </li> <li> List item 11 </li> <li> List item 12 </li> <li> List item 13 </li> <li> List item 14 </li> <li> List item 15 </li> <li> List item 16 </li> <li> List item 17 </li> <li> List item 18 </li> <li> List item 19 </li> <li> List item 20 </li> <li> List item 21 </li> <li> List item 22 </li> <li> List item 23 </li> <li> List item 24 </li> <li> List item 25 </li> <li> List item 26 </li> <li> List item 27 </li> <li> List item 28 </li> <li> List item 29 </li> <li> List item 30 </li> </ul> </div> </div>