提问人：Tiago Marques 提问时间：10/27/2023 更新时间：10/27/2023 访问量：25
在 flex：1 容器内时，滚动在我的表单容器上不起作用
Scroll not working on my forms container when inside flex:1 container
问：
我有一个定义高度为 100vh 的容器，在里面我有一个固定高度的标题和一个带有 flex：1 的内容容器来填充其余高度。在内容容器中，我有一个侧导航和一个内容容器。在内容容器中，我有一个带有 flex：1 的表单来填充剩下的所有内容，下面有一个具有固定高度的按钮容器。我有溢出：在我的表单上滚动，但不知何故它不起作用，整个页面都在滚动
Codepen 示例：
https://codepen.io/githubtiagomarques/pen/qBgOmgq
我希望页面保持在 100vh 并且表单滚动不稳。
.forms{ overflow-y: scroll; flex: 1 !important; }
Codepen 示例：https://codepen.io/githubtiagomarques/pen/qBgOmgq
答：
0赞
Dan Hebdon
10/27/2023
#1
主要问题是您的表单容器嵌套在导航内容中。
nav-content 和 forms-container 的高度均为 100%，overflow-y 不尊重这一点，它需要一个硬定义的单位来设置滚动边界。将 css 中的高度更改为 400px（以匹配容器的高度）会为您提供缺失的溢出行为。
.forms-container{
height: 400px; /* This can't be 100% for the overflow to work */
display: flex;
flex-flow: column;
}
但是，这并不能让您了解您所描述的内容，这是一个带有滚动部分的全屏容器。因此，这里有一些不同的补充。
.container {
display: flex;
flex-flow: column;
height: calc(100vh - 16px); /* This is full screen minus the margin of your heading (which is 16px) */
border: solid 5px black;
}
.forms-container {
height: calc(100vh - 16px - 100px); /* This is full screen minus the margin of your heading and the height of your buttons div */
display: flex;
flex-flow: column;
}
.section {
height: 150px; /* I made this larger as the supplied size isn't big enough to scroll */
}
还有很多其他响应性的事情需要考虑，我不会在这里讨论，但这应该有助于你走得更远。我希望它有所帮助。
评论
0赞
Tiago Marques
10/27/2023
我知道像这样定义高度可能会修复问题，但我想让它尽可能动态，如果我需要以某种方式更改标题的高度，我就不需要更改任何其他内容
评论