Flexbox 不尊重 overflow-x: hidden on body (Safari / iOS webkit)答案

【问题标题】：Flexbox doesn't respect overflow-x: hidden on body (Safari / iOS webkit)Flexbox 不尊重 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>

【问题讨论】：

标签： html css safari mobile-safari mobile-webkit

【解决方案1】：

有一个简单的修复方法，但如果您假设 overflow-x: hidden 则并不明显

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

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

【讨论】：