Flex-упаковка с динамической высотой

Question

Я пытаюсь получить div элементы для распределения по горизонтали , когда высота .container достигает дна оболочки .resize.

Когда я перетаскиваю окно, чтобы уменьшить высоту .container, я хочу также уменьшить оболочку .resize, когда нижняя часть .container встречается с нижней частью оболочки .resizeтак что элементы flex-wrap распределяются по горизонтали пропорционально динамической высоте .container.

body {
  position: absolute;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.container {
  flex: 1;
  border: 2px solid blue;
}
.resize {
  display: flex;
  height: auto;
  flex-direction: column;
  flex-wrap: wrap;
  border: 2px solid #f00;
}

.resize > div {
  border: 2px solid #555;
  flex: 0 0 auto;
  background-color: #ccc;
  height: 100px;
  width: 100px;
}

<div class="container">
  <div class="resize">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</div>

Answer 1

Я не думаю, что flexbox может это сделать.

То, что вы хотите, возможно в направлении строк.(Уменьшите окно по горизонтали в этой демонстрации )

Но это не работает в направлении столбца.(Уменьшите окно по вертикали в этой демонстрации ).

Это может быть еще одним недостатком при использовании flexbox в режиме column wrap.Вот несколько других:

• Когда элементы flexbox переносятся в режиме столбца, контейнер не увеличивает свою ширину
• Flexbox: неверный расчет ширины при сгибании-направление: колонка, гибкая упаковка: упаковка
• Высота гибкого контейнера не работает должным образом в Safari
• Возможно ли изгибать элементы вплотно прилегать к предметам над ними?
• гибкая упаковка не работает во вложенном гибком контейнере