Нежелательное пространство между упаковочными флекс-элементами

Question

Когда я устанавливаю высоту flex-контейнера больше, чем занимали бы flex-элементы, объекты, которые оборачиваются, имеют пространство между ними.Имейте в виду - justify-content и align-items оба установлены в flex-start.Вот фрагмент (нажмите на полная страница после запуска)

.flex-container {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
header,
main,
aside,
footer {
  padding: 1rem;
  background-color: tomato;
}
header,
footer {
  width: 100%;
}
main {
  width: 75%;
}
aside {
  flex-grow: 1;
}

<div class="flex-container">
  <header>Header Content</header>
  <main>Main content here.</main>
  <aside>Sidebar content</aside>
  <footer>Footer Content</footer>
</div>

Вот ручка

Это можно воспроизвести с помощью flex-direction: column;, если вы изменили все свойства.Это ожидаемое поведение?Если так, то почему?Есть ли способ, которым я обошёл это и получил что-то подобное:

с высотой флекс-контейнера, установленной на 100vh?

Answer 1

Правильный ответ без добавления дополнительной разметки: align-content: flex-start; - по умолчанию stretch, поэтому у обертывающих элементов есть дополнительное пространство между ними, когда размер flex-контейнера превышает размер элементов в нем.

Answer 2

Если я хорошо понимаю ваш вопрос - вы можете добавить следующий div .wrappper внутрь flex-container

.wrapper {
  position: relative;
  display: flex;  
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-basis: 100%;
}

body {margin: 0}

.wrapper {
  position: relative;
  display: flex;  
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-basis: 100%;
}

.flex-container {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}

header,
main,
aside,
footer {
  padding: 1rem;
  background-color: tomato;
}
header,
footer {
  width: 100%;
  background-color: blue;
  
}
main {
  flex-basis: 75%;
  flex-grow: 1;
  background-color: yellow;
}
aside {
  flex-grow: 1;
}

<div class="flex-container">
  <div class="wrapper">
  <header>Header Content</header>
  <main>Main content here.</main>
  <aside>Sidebar content</aside>
  <footer>Footer Content</footer>
  </div>
</div>

Объяснение того, что предыдущее решение не работает: потому что высота ваших flex-элементов была установлена ​​в 1rem + размер шрифта, а align-items: flex-start; был установлен такflex не изменяет высоту предметов, а ставит их на нужное место (flex-start).Но если вы используете align-items: streth;, то flex растянет элементы.Поскольку вы хотите иметь 100vh для .flex-контейнера, нам нужно использовать упаковщик, который не растянулся на полную высоту контейнера, потому что контейнер все еще align-items: flex-start;.И эта высота обертки равна сумме высоты его детей без лишних пробелов.