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.

[![enter image description here](https://i.stack.imgur.com/KuQgm.png)](https://i.stack.imgur.com/KuQgm.png)

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.