Решение
Добавьте min-height: 0 или overflow: auto (они в основном одинаковые) к main и .main-content.
main {
flex-grow: 1;
min-height: 0; /* new */
}
.main-content {
order: 2;
overflow: auto; /* new */
}
Протестировано на Chrome, Firefox иКрай.
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
main {
flex-grow: 1;
min-height: 0; /* new */
}
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100%;
}
header,
footer,
[class^="sidebar-"],
.main-content {
box-sizing: border-box;
padding: 1rem;
}
header,
footer {
background-color: lightgreen;
}
.sidebar-nav {
background-color: lightblue;
}
.sidebar-content {
background-color: lightyellow;
}
.sidebar-right {
background-color: lightpink;
}
.main-content {
background-color: lightgray;
}
@media(min-width: 48em) {
.sidebar-nav,
.sidebar-content {
width: 26%;
margin-right: 8%;
}
.main-content,
.sidebar-right {
flex-basis: 100%;
}
.main-content {
width: 66%;
}
.sidebar-right {
margin-left: 2rem;
width: 20%;
}
.sidebar-right+.main-content {
width: calc(66% - (20% + 2rem));
}
}
/* Ordering of Page Layout */
.sidebar-nav {
order: 1;
}
.main-content {
order: 2;
overflow: auto; /* new */
}
.sidebar-content {
order: 3;
}
.sidebar-right {
order: 4;
}
@media(min-width: 48em) {
.sidebar-content {
order: 2;
}
.main-content {
order: 3;
}
}
<header>
Header
</header>
<main>
<div class="container">
<div class="sidebar-nav">
Sidebar Navigation
</div>
<div class="sidebar-content">
Sidebar Content
</div>
<div class="sidebar-right">
Right Sidebar
</div>
<div class="main-content">
Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content<br> Main Content
</div>
</div>
</main>
<footer>
Footer
</footer>
Задача № 1: алгоритм минимального размера Flex
AЭлемент flex не может быть меньше размера его содержимого вдоль главной оси. Настройка по умолчанию для элементов flex в flex-direction: column - min-height: auto. Вы можете переопределить это с помощью min-height: 0 или, если вам нужны полосы прокрутки, overflow: auto.
Полное объяснение здесь: Почему гибкие элементы не уменьшаются до размера контента?
Проблема № 2: Ненадежное использование высоты в процентах
В соответствии со спецификацией , чтобы высота в процентах работала как задумано, она должна иметьопределенная высота на родителя. Например, ваш элемент .container имеет следующий CSS:
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100%;
}
Однако родительский элемент .container, то есть main, не имеет определенной высоты.
main {
flex-grow: 1;
}
Это приводит к непоследовательному и ненадежному поведению во всех браузерах.
Без определенной высоты родительского элемента браузер должен, согласно спецификации, отобразить элемент с height: auto, настройкой по умолчанию.
Однако в действительности разные браузеры имеют различное поведение рендеринга. Некоторые придерживаются спецификации. Другие пытаются угадать, что задумал автор (это известно как вмешательство ).
Кроме того, некоторые браузеры в настоящее время принимают гибкие длины для родителей в качестве адекватных ссылок для детей с процентным ростом. Однако он непоследователен и ненадежен.
Лучший способ справиться с этой настройкой - убедиться, что для родительского элемента с высотой в процентах установлена четкая контрольная точка. Также убедитесь, что вы используете свойство height, так как flex-basis не всегда надежно в некоторых браузерах / ситуациях.
Полное объяснение здесь: Chrome / Safari не заполняет 100% высоты flexродитель