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

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

Flexbox 提供了创建灵活布局的强大机制。然而，当与全高应用程序结合使用时，实现垂直滚动可能是一个挑战。

以前的解决方案

以前的方法，例如使用旧的 Flexbox 属性（例如，显示： box），已被证明对于支持旧版 Flexbox 语法的浏览器有效。然而，对于使用较新的 Flexbox 属性的现代浏览器，已经采用了在容器上设置 height: 0px 等解决方法，但可能会带来不良的副作用。

最佳解决方案

最佳解决方案涉及设置Flexbox 布局中垂直可滚动元素的高度。通过指定高度（或最小高度），Flexbox 会重新计算元素的高度，使其根据需要增长以容纳内容，同时在必要时仍强制执行垂直滚动。

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

好处

此解决方案：

• 在弹性盒内提供水平和垂直灵活性布局。
• 仅在需要时确保垂直滚动，无需额外的解决方法。
• 与现代浏览器和未来的 CSS 标准完全兼容。

演示

所提供的 JSFiddle 的增强版本演示了实际的最佳解决方案： http://jsfiddle.net/ch7n6/867/.

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