Javascript 在深嵌套的灵活容器中滚动

在这个代码示例中，我在深层灵活嵌套结构中实现了灵活的滚动容器

.container{
宽度：300px；
高度：500px；
边框：1px纯黑；
显示器：flex；
弯曲方向：立柱；
}
.静态{
填充：1rem；
背景：红色；
}
.灵活{
显示器：flex；
弯曲方向：立柱；
最小高度：0；
}
.弹性分区{
显示器：flex；
弯曲方向：立柱；
最小高度：0；
}
.溢出{
溢出：自动；
}

标题












滚动此处
























结束
页脚

我们可以去掉

display:flex

，因为没有水平对齐的元素。所以我们的任务就是创建垂直对齐的元素。我们知道默认情况下，

div

具有

display:block

，所以我们使用它：

*，html，正文{
保证金：0；
框大小：边框框；
身高：100%；
}
.集装箱{
宽度：300px；
高度：500px；
边框：1px纯黑；
}
.静态{
填充：1rem；
身高：10%；
背景：红色；
}
.中{
身高：80%；
}
.溢出{
溢出：自动；
}

标题












滚动此处
























结束
页脚