Flexbox 不尊重 overflow-x: hidden on body (Safari / iOS webkit)
Posted
技术标签:
【中文标题】Flexbox 不尊重 overflow-x: hidden on body (Safari / iOS webkit)【英文标题】：Flexbox doesn't respect overflow-x: hidden on body (Safari / iOS webkit) 【发布时间】：2019-01-24 11:25:46 【问题描述】：通常，在 body 上设置overflow-x: hidden 应该意味着整个页面永远不会滚动。
但在 MacOS Safari 和 ios webkit（Safari、Chrome 等）中，如果嵌套的 flexbox 元素溢出正文，overflow-x: hidden 将不受尊重。
在 Chrome / Firefox 中打开以下内容，一切正常。
在 Safari 或 iOS webkit 中打开，它会滚动。
https://codepen.io/anon/pen/jdPbGN
body
width: 100vw;
overflow-x: hidden;
margin: 0;
.flex
display: flex;
.sidebar
width: 100%;
height: 200px;
flex: 1 0 auto;
background-color: orange;
<body>
<main class="flex">
<aside class="sidebar">
</aside>
<section class="content">
<img src="https://via.placeholder.com/150" />
</section>
</main>
</body>【问题讨论】：
【参考方案1】：有一个简单的修复方法，但如果您假设 overflow-x: hidden 则并不明显
解决方法是将overflow-x: hidden 放在与display: flex 相同的元素上。
我觉得这是 Safari / iOS webkit 中的一个错误。好奇别人是否同意。
【讨论】：
以上是关于Flexbox 不尊重 overflow-x: hidden on body (Safari / iOS webkit)的主要内容，如果未能解决你的问题，请参考以下文章