Различное поведение flexbox с (переполнением-y) прокруткой на Safari, Firefox и Edge VS Chrome

На этой странице на plunker (https://plnkr.co/edit/gMbgxvUqHNDsQVe4P7ny?p=preview) возникает странная проблема.

В Chrome на Windows и Android (Canary также) все работает хорошо. Я могу прокручивать две области (слева и справа), а верхний и нижний div страницы находятся вверху и внизу экрана моего устройства. Я вижу их в любое время (см. Рисунок ниже).

На iPad или iPhone, iOS, с Safari или Chrome, это не то, что я получаю. А также на Firefox 47.0.1 на Windows.

Страница длинная, и справа есть только один прокрутка, например, если на странице нет flexbox, этот код просто игнорируется:

.bigone {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.main {
    flex: 1 1 0;
    display: flex;
}
.container-fluid {
  display: flex;
}
.col-6 {
  overflow-y: auto;
}

Пример Quirk:

Вы можете видеть на iPad или iPhone просто нажатием на эту кнопку:

Почему это поведение? Ошибка Safari и Firefox или Chrome? Почему в Chrome все хорошо работает на Windows и Android? И если в новом Safari в будущем это будет работать хорошо, как это сделать с более старыми устройствами со старыми iOS и firefox?

Буду признателен за любой ответ. Спасибо.

Ответ 1

Это и неприятная, и загадочная проблема.

Источником проблемы в этих типах вопросов обычно является алгоритм минимального размера для гибких элементов. Эти правила, которые являются частью спецификации, предотвращают сжатие элемента flex за размер его содержимого. Такое поведение предотвращает рендеринг полосы прокрутки, поскольку содержимое не может переполнять элемент гибкости. Он просто расширяет его.

Но ни один из стандартных методов для переопределения этого поведения (например, min-height: 0, overflow: hidden), похоже, не работает в этом случае.

Вот два предложения, которые могут приблизиться к решению:

(1) Поскольку вы хотите, чтобы весь макет отображался в окне просмотра (т.е. нет вертикальной полосы прокрутки в окне браузера), не используйте min-height для размера контейнера. Это позволяет расширять контейнер. Вместо этого используйте фиксированную высоту.

Внесите эту настройку в код:

.bigone {    
    display: flex;
    /* min-height: 100vh;   <-- REMOVE */
    height: 100vh;       /* <-- NEW   */
    flex-direction: column;
}

Но это само по себе не решает проблему.

(2) Простым и быстрым решением проблемы является установка высоты на .col-6.

Добавьте это в свой код:

.col-6 {
    height: 90vh;
 }

Итак, похоже, что Edge, FF и другие "неработающие" браузеры нуждаются в определенной высоте на этом контейнере.

измененное демо

Ответ 2

Ответ Michael_B недостаточно. 90vh не работает с динамическим заголовком, нижним колонтитулом и другими div.

Я исправил это (временно, пока Safari не исправит это) с этим в родительском div:

min-height: 100vh; height: 100vh;

flex: 1; min-height: 0;' для первых детей.

Но запах тяжелый.

Ответ 3

Try:

margin: auto;

в css для flex-item - это помогло (кажется, что авто делает магию здесь...)

Хотелось поделиться этим нахождением, поскольку min-height, overflow-x и т.д. не работали надежно и для меня.