Html 我怎样才能阻止a<；ul>；元素溢出其容器的边界？

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

这是一个密码笔：

这是我的头衔

清单项目1
清单项目2
[……]

我认为在

.innerdiv

或

ul

元素上设置

溢出：auto

就足够了，但这两个元素似乎根据

的内容调整大小，完全忽略了

.outerdiv

框的边界

---

我还没有找到一种方法来限制

.innerdiv

或

ul

元素的增长不超过

.outerdiv

的大小。它们总是独立于版面的其余部分调整大小，然后，根据

.outerdiv

上的

溢出：可见| auto

设置，我能做的最好的事情就是剪辑或滚动

.outerdiv

的全部内容，包括标题。

Mb类似这样的内容：

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

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

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

ul{
身高：70%；
溢出：自动；
}
欧特尔迪夫先生{
利润率：10px；
}
.innerdiv{
背景色：#9cfff14a；
身高：70%；
}
欧特尔迪夫先生{
高度：200px；
}

这是我的头衔

清单项目1
清单项目2
清单项目3
清单项目4
清单项目5
清单项目6
清单项目7
清单项目8
清单项目9
清单项目10
清单项目11
清单项目12
清单项目13
清单项目14
清单项目15

使用flexbox：

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

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

---

.outerdiv{
边框：1px纯黑；
利润率：10px；
高度：300px；
显示器：flex；
弯曲方向：立柱；
}
.outerdiv h4{
边框底部：1px点灰色；
保证金：0；
填充：20px；
}
.innerdiv{
背景色：#9cfff14a；
弹性：1；
溢出：自动；
}

这是我的头衔

清单项目1
清单项目2
清单项目3
清单项目4
清单项目5
清单项目6
清单项目7
清单项目8
清单项目9
清单项目10
清单项目11
清单项目12
清单项目13
清单项目14
清单项目15
清单项目16
清单项目17
清单项目18
清单项目19
清单项目20
清单项目21
清单项目22
清单项目23
清单项目24
清单项目25
清单项目26
清单项目27
清单项目28
清单项目29
清单项目30

位置：我想你要找的是固定的

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

---

请参见示例代码：

.main{
边框：1px实心#000；
保证金：0；
填充：0；
位置：固定；
宽度：50%；
}
欧特尔迪夫先生{
位置：固定；
背景：#999；
宽度：50%；
颜色：#fff；
}
.outerdiv h4{
左侧填充：28px
}
.innerdiv{
利润上限：70像素
}
.innerdivul{
保证金：0；
填充：0；
列表样式：无；
溢出y：滚动；
高度：300px
}
李国荣先生{
左边距：20px
}

这是我的头衔

清单项目1
清单项目2
清单项目3
清单项目4
清单项目5
清单项目6
清单项目7
清单项目8
清单项目9
清单项目10
清单项目11
清单项目12
清单项目13
清单项目14
清单项目15
清单项目16
清单项目17
清单项目18
清单项目19
清单项目20
清单项目21
清单项目22
清单项目23
清单项目24
清单项目25
清单项目26
清单项目27
清单项目28
清单项目29
清单项目30

这很有效，谢谢！我实际上把问题搞砸了。在我的例子中，它实际上是一个可变高度的长方体，而不是一个固定高度的长方体，您的解决方案对这两种情况都很有效。

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