在 flex:1 容器内时，滚动在我的表单容器上不起作用

Question

我有一个定义高度为 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

Answer 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 */ 
}

还有很多其他响应式的事情需要考虑，我不会在这里讨论，但这应该有助于你走得更远。我希望它有帮助。