Flexbox 不尊重 overflow-x：隐藏在body上(Safari / iOS webkit)

通常，在正文上设置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，则不明显：隐藏应该总是停止父滚动，当它的任何子/孙子溢出时。

解决方法是将overflow-x: hidden放在与display: flex相同的元素上。

我觉得这是Safari/iOS webkit中的一个错误。好奇其他人是否同意。

相关内容

最新更新

热门标签：