Html CSS div不考虑父边界

我试图在另一个div中获得一个div，并将最大高度设置为该高度，最终使其中的内容可以垂直滚动

我在一个div中列出了一系列标签，它们有一个display:block，并且显示正确。父div将展开以适应超出其父最大高度的标签，这是不需要的

我尝试过在父容器上设置溢出以及相对位置，在子容器上设置绝对位置，反之亦然，但都没有成功。我想知道为什么列表容器不遵守content containers max height参数

容器{ 位置：固定； 排名：0； 左：0； 身高：100%； 宽度：100%； } 内容容器{ 宽度：500px； 最高高度：20%； 保证金：自动； 利润率最高：2%； 字体大小：20px； 边框：1px纯蓝色； } 列表容器{ 填充顶部：20px； 左侧填充：10px； 边框：1px纯绿色； } .清单项目{ /*宽度：100%*/ 显示：块； 边框：1条实心鲑鱼； } 内容1 内容2 内容3 内容4 内容5 内容6 内容7

---

如果要使其可滚动，应使用溢出：自动或溢出：滚动：

容器{ 位置：固定； 排名：0； 左：0； 身高：100%； 宽度：100%； } 内容容器{ 宽度：500px； 最高高度：20%； 溢出：自动； 保证金：自动； 利润率最高：2%； 字体大小：20px； 边框：1px纯蓝色； } 列表容器{ 填充顶部：20px； 左侧填充：10px； 边框：1px纯绿色； } .清单项目{ /*宽度：100%*/ 显示：块； 边框：1条实心鲑鱼； } 内容1 内容2 内容3 内容4 内容5 内容6 内容7

---

如果要使其可滚动，应使用溢出：自动或溢出：滚动：

容器{ 位置：固定； 排名：0； 左：0； 身高：100%； 宽度：100%； } 内容容器{ 宽度：500px； 最高高度：20%； 溢出：自动； 保证金：自动； 利润率最高：2%； 字体大小：20px； 边框：1px纯蓝色； } 列表容器{ 填充顶部：20px； 左侧填充：10px； 边框：1px纯绿色； } .清单项目{ /*宽度：100%*/ 显示：块； 边框：1条实心鲑鱼； } 内容1 内容2 内容3 内容4 内容5 内容6 内容7 添加溢出：滚动；到内容容器

添加溢出：滚动；到内容容器

容器{ 位置：固定； 排名：0； 左：0； 身高：100%； 宽度：100%； } 内容容器{ 宽度：500px； 最高高度：20%； 保证金：自动； 利润率最高：2%； 字体大小：20px； 边框：1px纯蓝色； 溢出：自动；//还是溢出：隐藏？ } 列表容器{ 填充顶部：20px； 左侧填充：10px； 边框：1px纯绿色； } .清单项目{ /*宽度：100%*/ 显示：块； 边框：1条实心鲑鱼； } 内容1 内容2 内容3 内容4 内容5 内容6 内容7 容器{ 位置：固定； 排名：0； 左：0； 身高：100%； 宽度：100%； } 内容容器{ 宽度：500px； 最高高度：20%； 保证金：自动； 利润率最高：2%； 字体大小：20px； 边框：1px纯蓝色； 溢出：自动；//还是溢出：隐藏？ } 列表容器{ 填充顶部：20px； 左侧填充：10px； 边框：1px纯绿色； } .清单项目{ /*宽度：100%*/ 显示：块； 边框：1条实心鲑鱼； } 内容1 内容2 内容3 内容4 内容5 内容6 内容7

---

你就快到了。它只是缺少内容容器上的溢出：自动。这样它的区域就可以滚动了

帮助您理解以下内容的代码笔：

---

你就快到了。它只是缺少内容容器上的溢出：自动。这样它的区域就可以滚动了

帮助您理解以下内容的代码笔：

---

可选溢出-y：滚动；为了避免水平滚动条。另外一个问题，如果我希望列表容器是可滚动的div，我将如何更改它？我可以让滚动条显示在列表容器上，但我似乎无法让它保持在父内容的大小范围内-container@JonFriesen内容容器{高度：20%}列表容器{最大高度：100%；溢出：自动；框大小：边框框；}@Oriol-感谢您的帮助！我很欣赏简洁的答案：或者，overflow-y:scroll；为了避免水平滚动条。另外一个问题，如果我希望列表容器是可滚动的div，我将如何更改它？我可以让滚动条显示在列表容器上，但我似乎无法让它保持在父内容的大小范围内-container@JonFriesen内容容器{高度：20%}lis

---

t型容器{最大高度：100%；溢出：自动；框大小：边框框；}@Oriol-感谢您的帮助！我感谢你简洁的回答：