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

【问题标题】：Overflow-x:hidden conflict with CSS Flexbox in Chrome only溢出-x：仅在 Chrome 中与 CSS Flexbox 的隐藏冲突
【发布时间】：2019-05-24 17:48:22
【问题描述】：

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

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

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

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

【问题讨论】：

标签： html css angular

【解决方案1】：

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

【讨论】：

哦，伟大的 Piotr，它有效！这个隐含的最小高度是一个小丑（developer.mozilla.org/en-US/docs/Web/CSS/flex）。很好的解释，我同意 Chrome 决定将 min-height 设置为初始大小一定是一个错误，从而防止后续缩小。我看不出为什么 min-height 应该采用这个超大尺寸的充分理由。值得注意的是，Chrome 仅在使用 overflow-x:hidden! 时才会做出此决定！我看不到连接。
对我来说，无论有没有overflow-x:hidden，问题都会出现。但是，在开发工具中切换这条 css 行似乎会导致重新计算布局，这可能看起来好像一种或另一种工作正常，但即使在此之后，如果窗口是驻留的，问题仍然存在。在 chrome v 71、windows 上测试。