我正在使用CSS Flexbox进行页眉/正文/页脚布局。但是,如果使用overflow-x:hidden增添了外部div,Chrome会在减小视口高度时开始裁剪底部(状态元素),并引入垂直滚动条。

Firefox可以通过缩小元素高度来按预期工作,并在减小浏览器高度时继续显示状态栏。
如果重新加载页面或更改视口宽度,Chrome会恢复正确的布局。

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

通过在两种浏览器中显示上述stackblitz,可以看出Chrome和Firefox之间的区别。

最佳答案

对于弹性版式,min-height(或默认值为min-widthflex-direction: row)隐含值为auto。由于某些原因,Chrome决定将在初始页面呈现期间所拥有内容的大小视为当前的auto值,并且在缩小窗口期间不会重新计算整个布局。可能是Chrome CSS布局引擎中的错误。解决方法是将min-height: 0添加到content + status div中,如this link所示。

关于html - Overflow-x:仅与Chrome中的CSS Flexbox隐藏冲突,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53932489/

10-12 12:33
查看更多