如何在全高 Flexbox 应用程序中启用垂直滚动？

在全高应用程序中结合 Flexbox 和垂直滚动

问题：

使用创建全高应用布局flexbox 同时启用垂直

讨论：

使用最新的 Flexbox 属性，可以实现全高度的应用布局。然而，添加垂直滚动可能具有挑战性。

使用过时的 Flexbox 布局（例如，display: box）的初始方法对于仅支持旧版本的浏览器是可行的。

解决此问题问题，有人提出了一个 hack，其中涉及将容器的高度设置为 0px。虽然此解决方法解决了滚动问题，但它会产生新问题。

解决方案：

理想的解决方案是为 Flexbox 布局中的可滚动元素设置高度。默认情况下，flexbox 会计算其元素的高度，因此 0px 的高度将有效地启用垂直滚动。

如果需要最小高度，可以使用 min-height 代替，例如 min-height: 100px .

代码示例：

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 0px; /* or min-height: 100px */
}

这种方法确保可滚动元素具有高度，同时允许 Flexbox 动态重新计算它。

更新的 Fiddle：

[更新的 JSFiddle](http://jsfiddle.net/ ch7n6/867/) 演示了最终的解决方案。

以上是如何在全高 Flexbox 应用程序中启用垂直滚动？的详细内容。更多信息请关注PHP中文网其他相关文章！