Css 仅使一个部分可滚动，而不是整个页面

我正在从事一个项目，其中一个部分通过从数据库请求数据来填充元素，因此其中的元素数量是非常可变的

棘手的是，我们的设计是基于这样一个想法，即不必在页面上滚动，而是在必要时滚动部分。我认为在部分中使用

溢出

就足够了，但它并没有给出预期的结果

我尝试了

overflow

属性的所有变体，

scroll

显示一个滚动条，但它似乎被冻结了

如何使

第一节本身可滚动，而不使页面的其余部分可滚动

我创建了一个带有虚拟版本的代码笔来演示问题：


正文{
溢出：隐藏；
}
主要{
保证金：0；
宽度：100%；
身高：100%；
}
.第一节{
背景色：#FF0000；
浮动：左；
最小高度：1400px；
溢出：可见；
宽度：15%；
}
.第二节{
背景色：#00FF00；
浮动：左；
最小高度：1400px；
宽度：70%；
}
.第三节{
背景色：#0000FF；
最小高度：1400px；
浮动：左；
宽度：15%；
}

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第二节

这是第三节

对CSS进行以下调整：


html{
高度：100%；/*注#1*/
}
身体{
高度：100%；/*注#1*/
边距：0；/*注#2*/
溢出：隐藏；
}
主要{
保证金：0；
身高：100%；
}
.第一节{
背景色：#FF0000；
浮动：左；
溢出-y:自动；/*新*/
宽度：15%；
高度：100%；/*注#3*/
}
.第二节{
背景色：#00FF00；
浮动：左；
最小高度：1400px；
宽度：70%；
}
.第三节{
背景色：#0000FF；
最小高度：1400px；
浮动：左；
宽度：15%；
}

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第一节

这是第二节

这是第三节

我想您的问题的解决方案已经发布了。非常感谢，不仅解决了我的问题，而且回答很有意义，帮助我理解发生了什么。是否可以使第二节可滚动，但在第一节滚动时防止滚动。