Css 当父元素高度不固定时，将子元素限制为父元素高度

是否可以防止css网格容器中设置为

高度：80%

的子容器溢出

当css网格行设置为

1fr

时，它很容易被其子行溢出

我的主要目标是限制

.bottom

和

.side

的高度

并让

ul

元素填充

.side

元素，同时让

overflow-y:scroll

.side

应始终为

.bottom

的全高

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体，
html{
身高：100%；
}
.集装箱{
身高：80%；
最大高度：300px；
宽度：500px；
保证金：0自动；
边框：1px实心#000；
显示：网格；
网格模板行：72px 1fr；
}
.顶{
背景色：青色；
}
.底部{
背景色：#e9eaf4；
显示：网格；
网格模板列：224px 1fr；
栅柱间隙：24px；
}
.底部.侧面，
.bottom.main{
背景色：#fff；
}
保险商实验室{
列表样式：无；
边框：1px红色虚线；
}
ul跨度{
填充：10px；
字体大小：20px；
}

顶部
一边

一,
二,
三,
四,
五,
六,
七,
八,
九,
十,

主要的

如下调整代码（检查注释）。了解

min height

技巧的相关问题

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体，
html{
身高：100%；
}
.集装箱{
身高：80%；
最大高度：300px；
宽度：500px；
保证金：0自动；
边框：1px实心#000；
显示：网格；
网格模板行：72px 1fr；
}
.顶{
背景色：青色；
}
.底部{
背景色：#e9eaf4；
显示：网格；
网格模板列：224px 1fr；
栅柱间隙：24px；
最小高度：0；/*已添加*/
}
.底部.侧面，
.bottom.main{
背景色：#fff；
显示：flex；/*已添加*/
弯曲方向：列；/*已添加*/
最小高度：0；/*已添加*/
}
保险商实验室{
列表样式：无；
边框：1px红色虚线；
溢出：自动；/*已添加*/
}
ul跨度{
填充：10px；
字体大小：20px；
}

顶部
一边

一,
二,
三,
四,
五,
六,
七,
八,
九,
十,

主要的

溢出：自动到底部元素？或到侧元素？
溢出：自动到边元素没有帮助，到底元素比理想元素少，这里也解释了这一点：