Flexbox не учитывает переполнение-x: скрыто в теле (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>


html css safari mobile-safari mobile-webkit
person Graeme Blackwood    schedule 24.01.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Существует простое исправление, хотя и неочевидное, если предположить, что overflow-x: hidden должен всегда останавливать родительскую прокрутку, когда любой из его дочерних элементов/внуков переполняется.

Исправление состоит в том, чтобы поместить overflow-x: hidden в тот же элемент, что и display: flex.

Я чувствую, что это ошибка в Safari / iOS webkit. Интересно, согласятся ли другие.

person Graeme Blackwood    schedule 24.01.2019