通常情况下，在 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>最佳答案
有一个简单的修复方法，但如果您假设 overflow-x: hidden 应该总是在其任何子级/孙级溢出时停止父级滚动，则不明显。
解决方法是将 overflow-x: hidden 放在与 display: flex 相同的元素 上。
我觉得这是 Safari/iOS webkit 中的错误。好奇其他人是否同意。
关于html - Flexbox 不遵守 overflow-x : hidden on body (Safari/iOS webkit)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54345532/