Question

通常，在正文上设置overflow-x: hidden意味着整个页面永远不会滚动。

但是在MacOS Safari和iOS Webkit（Safari，Chrome等）中，如果嵌套的 flexbox 元素溢出正文，则overflow-x: hidden将不受尊重。

在Chrome / Firefox中打开以下内容，即可正常运行。

在Safari或iOS Webkit中打开，然后滚动。

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>

Answer 1

有一个简单的解决方法，但是如果您假定为overflow-x，则不会很明显：隐藏的应该始终在任何子代/子代溢出时停止父级滚动。

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

我觉得这是Safari / iOS Webkit中的错误。好奇别人是否同意。

Flexbox不尊重溢出-x：隐藏在主体上（Safari / iOS webkit）

1 个答案: