我正在使用CSS Flexbox进行页眉/正文/页脚布局。但是,如果使用overflow-x:hidden增添了外部div,Chrome会在减小视口高度时开始裁剪底部(状态元素),并引入垂直滚动条。
Firefox可以通过缩小元素高度来按预期工作,并在减小浏览器高度时继续显示状态栏。
如果重新加载页面或更改视口宽度,Chrome会恢复正确的布局。
Stackblitz示例:
https://stackblitz.com/edit/angular-xtapbp
通过在两种浏览器中显示上述stackblitz,可以看出Chrome和Firefox之间的区别。
最佳答案
对于弹性版式,min-height
(或默认值为min-width
的flex-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/