интеграция Flexbox и вертикального прокрутки в полном макете

при работе с приложениями полной высоты может быть распространенным требованием. Однако он может представлять проблемы из-за интерактивной природы макетов Flexbox.

традиционный подход Flexbox (старые свойства)

макеты Flexbox с использованием старого синтаксиса (Display: Box) разрешают полные приложения с вертикальным прокрутком в определенных броузерах. Это решение полагается на установку гибкого направления в столбце и использование Overflow-y: Auto на родительском элементе.

с использованием более новых свойств Flexbox

, пытаясь применить более новые свойства Flexbox с полным высоким и просмотренным дизайном вводит ограничения. Обходной путь с использованием высоты: 0px; На элементе обертки ненадежны и создают дополнительные проблемы.

Решение: Настройка высота для вертикального элемента прокрутки

надежное решение включает в себя настройку определенной высоты для элемента, где требуется вертикальное прокрутка. Это позволяет алгоритму Flexbox вычислять соответствующую высоту и при необходимости отображать полосу прокрутки. Например, используя следующие css:

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 0px;
}

определение минимальной высоты

Если требуется минимальная высота, замените высоту: 0px; с минимальным высоте: желаемая ценность; Чтобы убедиться, что элемент отображает прокрутку, даже если его содержимое не превышает указанный минимум.

] окончательный пример

В итоге наиболее эффективным решением для объединения гибкого ящика и вертикального прокрутки в полном макете-для установки (или мин-хот-версии) для вертикального прокрутки. Это допускает оптимальное поведение рендеринга и прокрутки, что приводит к бесшовному пользовательскому опыту.