我如何才能停止 <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>

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

我还没有找到一种方法来限制.innerdiv或ul元素增长到不超过.outerdiv的大小。 它们始终调整大小，而与其余布局无关，然后，根据overflow: visible|auto .outerdiv上的overflow: visible|auto设置，我能做的最好的事情就是剪辑或滚动.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>