CSS flex-basis не работает, когда flex-direction - это "столбец"

Моя цель - создать двухстолбцовый макет с flexbox, в котором первый столбец имеет две строки, а второй столбец имеет один, например:

Настройка flex-basis: 100% на третьем элементе дает желаемый эффект, но только тогда, когда контейнер flex-direction равен row:

Изменение flex-direction на column приводит к следующему, если явно не указано значение height, что невозможно в моем проекте:

Как я могу получить первое изображение без явной установки контейнера height?

Здесь показан Plunker, иллюстрирующий проблему.

body {
  display: flex;
  height: 100px;
  width: 100px;
}
.container {
  display: flex;
  flex-direction: column; /* Setting this to `row` gives the expected effect,but rotated */
  flex-grow: 1;
  flex-wrap: wrap;
  /* height: 100%; */ /* Setting this fixes the problem, but is infeasible for my project*/
}
.item {
  flex-grow: 1;
}
.one {
  background-color: red;
}
.two {
  background-color: blue;
}
.three {
  background-color: green;
  flex-basis: 100%;
}

<div class="container">
  <div class="item one">&nbsp;</div>
  <div class="item two">&nbsp;</div>
  <div class="item three">&nbsp;</div>
</div>

Ответ 1

Почему это не работает:

Обертка Flex происходит только тогда, когда начальный основной размер элементов flex переполняет контейнер flex. В случае flex-direction: row, это когда они гибкие элементы шире, чем контейнер. С помощью flex-direction: column они должны переполнять высоту контейнера.

Но в CSS высота ведет себя принципиально иначе, чем ширина. Высота контейнера в CSS определяется высотой его дочерних элементов. Таким образом, без чего-либо, ограничивающего высоту контейнеров, гибкие элементы никогда не будут переполняться; они просто повышают свой контейнер. Если они не переполняются, они не обернутся.

Возможные решения:

Вы должны ограничить высоту контейнера. Очевидный способ (который вы сказали вне таблицы), устанавливает явные height или max-height.

Спросите себя, почему вам нужно ограничить высоту. Оставаться в пределах окна просмотра? Вы можете использовать viewport-relative единицы и установить что-то вроде max-height: 100vh. Является ли он равным высоте другого столбца вне этого гибкого контейнера? Возможно, вы сможете ограничить его другим flexbox. Сделайте этот гибкий контейнер гибким элементом во внешнем flexbox. Однако что-то еще в этом внешнем flexbox должно было бы установить его высоту.

Ответ 2

Попробуйте установить flex: none для блоков внутри контейнера при условии изменения ориентации (@media и т.д.)

Я тестировал его в Chrome и Firefox.

Ответ 3

Насколько я понимаю, следующий код дает нужный результат:

body {
  display: flex;
  height: 100px;
  width: 100px;
}

.container {
  display: flex;
  flex-direction: column; 
  flex-wrap: wrap;
  flex-grow:1;
}

.item {
  flex-basis:50%;
}

.one {
  background-color: red;
}

.two {
  background-color: blue;

}

.three {
  background-color: green;
  flex-basis:100%;
}

За исключением flex-basis:50%;, этот код равен коду, который вы используете в плункере. По какой-то причине плункер не поддерживает flex-basis, см. Также:

Ответ 4

Я думаю, что вы должны построить свой макет, используя систему Grid. На первом снимке мы видим 2 столбца: первый столбец - красный и синий, второй - зеленый.

И тогда структура должна быть такой:

<div class="flex-container">
    <div class="col column">
        <div class="content red"></div>
        <div class="content blue"></div>
    </div>
    <div class="col">
        <div class="content green"></div>
    </div>
</div>

Использование этих стилей:

.flex-container {
   display:flex;
}
.col {
   flex:1;
   display:flex;
}
.column {
   flex-direction:column;
}
.content {
   flex:1;
}

Вот быстрый код, использующий вашу демонстрационную цель: https://jsfiddle.net/wyyLvymL/ Надеюсь, поможет! (если вам нужно понять, как это работает, пинг меня)