html - 溢出-x：仅在 Chrome 中与 CSS Flexbox 的隐藏冲突

Question

我正在使用 css flexbox 进行页眉/正文/页脚布局。但是，如果使用overflow-x:hidden 为outer-div 增添色彩，Chrome 会在降低视口高度时开始裁剪底部（状态元素），并引入垂直滚动条。

Firefox 通过缩小 body-element 高度按预期工作，并在降低浏览器高度时继续显示状态栏。如果重新加载页面或更改视口宽度，Chrome 会恢复正确的布局。

Stackblitz 示例： https ://stackblitz.com/edit/angular-xtapbp

通过在两个浏览器中展示上面的 stackblitz 可以看出 Chrome 和 Firefox 的区别。

标签： htmlcssangular

Answer 1

min-height（或min-width默认flex-direction: row方向）的隐含值适用auto于 flex 布局。出于某种原因，Chrome 决定，您在初始页面渲染期间拥有的内容大小应被视为当前auto值，并且在窗口缩小期间它不会重新计算整个布局。可能这是 Chrome css 布局引擎中的一个错误。一个解决方案是添加min-height: 0到 content+status div，如链接所示。