如何阻止<ul>元素溢出其容器的边界？

Question

我正在尝试在CSS中创建一个简单的固定高度框，标题位于顶部，而元素的任意长度列表如下。我希望列表仅 可滚动，而标题仍然可见并固定在顶部。

这是一个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>

我认为在overflow: auto或.innerdiv元素上设置ul就足够了，但是这两个元素似乎根据<ul>的内容来确定大小，完全忽略了.outerdiv框的边界。

我还没有找到一种方法来限制.innerdiv或ul元素增长到不大于.outerdiv的大小。它们总是独立于布局的其余部分调整大小，然后，根据overflow: visible|auto上的.outerdiv设置，我能做的最好的就是剪辑或滚动 entire 内容.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>

Answer 2

Mb是这样的：

.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

位置：固定是我想找的东西。

* {
    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

请参见示例代码：

.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>