html - 如何阻止 元素溢出其容器的边界？

Question

我试图在 CSS 中创建一个简单的固定高度的框，顶部有一个标题，下面是一个任意长度的元素列表。我希望仅列表可滚动，而标题保持可见并固定在顶部。

这是一个代码笔:
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>

我想设置 overflow: auto在.innerdiv或 ul元素就足够了，但这两个元素似乎根据 <ul> 的内容自行调整大小。 , 完全忽略 .outerdiv 的边界盒子。

我还没有找到一种方法来约束 .innerdiv或 ul元素增长不超过 .outerdiv 的大小.他们总是独立于布局的其余部分调整自己的大小，然后，取决于 overflow: visible|auto设置 .outerdiv ，我能做的最好的就是剪辑或滚动 .outerdiv 的全部内容，包括标题。

Answer 1

使用 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>