flex box не набирает высоту с помощью flex-wrap

Question

Я создал простой JSFiddle ниже. Почему моя розовая коробка (.screen) не достигает полной высоты вплоть до красной и синей коробок?

Я пытался установить height: 100% на screen div, но это заставляет его расти из .inner-container и помещать себя выше .bottom.

EDIT У меня есть проблема с помещением .screen вне .inner-container о котором я забыл рассказать. Когда страница инициализируется впервые, .screen будет иметь display:none, потому что пользователь еще не начал совместное использование экрана. Когда пользователь нажимает кнопку, чтобы поделиться своим экраном, я установлю .subscriber на width: 10rem и отобразится .screen. Просто используя ширину, я могу «переместить» контейнер подписчика из середины вверх.

РЕДАКТИРОВАТЬ 2 Чтобы больше показать, что я за вами, вы можете удалить flex: 0 1 100% из .screen и добавить width: 100%; height: calc(100% - 10.5rem);. Такое ощущение, что я должен иметь возможность делать с флексом, но, возможно, нет.

Решение В итоге я переместил .screen за пределы .inner-container, и я динамически переключаю флекс -направление между row и column на .inner-container, чтобы получить желаемый результат. См. @Vals answer о том, почему это невозможно с помощью flex-box прямо сейчас.

Вот JSFiddle: https://jsfiddle.net/kejq01s2/2/

.outer-container {
  height: 100vh;
  background: yellow;
  display: flex;
  flex-direction: column;
}

.inner-container {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}

.publisher {
  width: 10rem;
  height: 10rem;
  background: red;
  margin: .5rem;
}

.subscriber {
  width: 10rem;
  height: 10rem;
  background: blue;
  margin: .5rem;
}

.screen {
  background: pink;
  flex: 0 1 100%;
}

.bottom {
  width: 100%;
  height: 6rem;
  background: green;
}

<div class="outer-container">
  <div class="inner-container">
    <div class="publisher"></div>
    <div class="subscriber"></div>
    <div class="screen"></div>
  </div>
  <div class="bottom"></div>
</div>

Answer 1

Это не ответ, чтобы показать вам, как этого добиться, но объяснение того, что происходит, и почему вы не можете получить то, что вы хотите.

Поскольку flex-direction это строка , высота равна поперечной оси . Вы можете управлять этим размером с помощью 2 стилей: align-items и align-content

Если вы установите align-items в stretch , то предметы будут расти ... пока они не достигнут высоты изгиба. (Контейнер flex устанавливает элементы в строках, даже если они не видны).

Если вы установите выравнивание-содержимого на stretch , то flex-линии увеличатся, чтобы заполнить все доступные пространство в контейнере.

Теперь в вашем макете screen не имеет высоты. Таким образом, когда гибкие линии имеют размеры, первая строка получает высоту около 11 мкм, то есть высоту издателя. Вторая строка получает высоту 0. Если установить align-content в stretch, то flex-линии будут расти до тех пор, пока они не заполнят все доступное пространство в контейнере.

НО , дополнительное пространство будет распределяются поровну между первой и второй строкой. Таким образом, вторая строка не может расти, чтобы соответствовать воспринимаемой высоте первой строки.

Вы можете настроить элемент screen для индивидуального роста, что делается с помощью варианта align-items. то есть align-self, этот устанавливается на дочерних, а не на родительских, поэтому он выборочный. НО, у вас нет свойства, чтобы решить, какую гибкую линию вырастить, поэтому вам не повезло.

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