Flexbox не учитывает переполнение-x: скрыто на теле (Safari / iOS webkit) - PullRequest
Новая
       26

Flexbox не учитывает переполнение-x: скрыто на теле (Safari / iOS webkit)

0 голосов
/ 24 января 2019

Обычно установка overflow-x: hidden в теле должна означать, что вся страница никогда не прокручивается.

Но в MacOS Safari и веб-наборе iOS (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>

1 Ответ

0 голосов
/ 24 января 2019

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

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

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

...