CSS Flex элементы по вертикали, а затем по горизонтали

Question

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

Трудно устно объяснить, чего я хочу достичь, поэтому вот JsFiddle из того, что у меня сейчас есть: JsFiddle

.parent {
  width: 400px;
  height: 300px;
  background: white;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

.child {
  width: 160px;
  height: 80px;
  margin: 4px;
  background: red;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Изображение того, чего я хотел бы достичь:

Answer 1

Вы можете иметь что-то похожее, если используете направление столбца.В этом случае переполнение произойдет справа, а не снизу:

.parent {
  width: 400px;
  height: 300px;
  background: white;
  border: 1px solid black;
  display: flex;
  flex-direction:column;
  justify-content:flex-end;
  flex-wrap: wrap;
  overflow: hidden;
}

.child {
  width: 160px;
  height: 80px;
  margin: 4px;
  background: red;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>