Як я можу зробити дітей Flexbox на 100% висотою свого батька?

Я намагаюся заповнити вертикальний простір гнучких елементів всередині Flexbox.

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

І ось JSFiddle

flex-2-child не заповнює необхідну висоту, за винятком двох випадків, коли:

1. flex-2 має висоту 100% (що дивно, оскільки гнучка деталь має 100% за замовчуванням + вона баггі в Chrome)
2. flex-2-child має абсолютне положення, яке також незручно

Наразі це не працює в Chrome чи Firefox.

Використовуйте align-items: stretch

Подібно до відповіді Девіда Сторі, мій спосіб вирішення:

.flex-2 {
    display: flex;
    align-items: stretch;
}

Як варіант align-items, ви можете використовувати align-selfлише .flex-2-childпредмет, який ви хочете розтягнути.

Я відповів на подібне запитання тут .

Я знаю, ви вже сказали, що position: absolute;це незручно, але це працює. Нижче див. Додаткову інформацію щодо вирішення проблеми зміни розміру.

Також дивіться цей jsFiddle для демонстрації, хоча я додав лише префікси webkit, настільки відкриті в Chrome.

У вас в основному є два питання, якими я буду займатися окремо.

1. Отримання дитиною флекс-елемента на висоту заповнення 100%
   • Встановити position: relative;на батька дитини.
   • Встановити position: absolute;на дитину.
   • Потім ви можете встановити ширину / висоту, як потрібно (100% у моїй вибірці).
2. Виправлення прокрутки "розміру" в Chrome
   • Поставте overflow-y: auto;прокручуваний дів.
   • Ділянка, що прокручується, повинна мати вказану чітку висоту. Мій зразок вже має висоту 100%, але якщо жодна вже не застосовується, ви можете вказатиheight: 0;

Дивіться цю відповідь для отримання додаткової інформації щодо проблеми прокрутки.

Якщо я правильно розумію, ви хочете, щоб дитина flex-2-dete заповнила висоту та ширину свого батьківського, щоб червона зона була повністю покрита зеленим?

Якщо так, вам просто потрібно встановити flex-2 для використання flexbox:

.flex-2 {
    display: flex;  
}

Потім скажіть дитині flex-2, щоб вона стала гнучкою:

.flex-2-child {    
    flex: 1;
}

Дивіться http://jsfiddle.net/2ZDuE/10/

Причина в тому, що дитина flex-2 не є елементом flexbox, але є його батьківським.

Я припускаю, що поведінка Chrome більше відповідає специфікації CSS (хоча це менш інтуїтивно). Згідно з специфікацією Flexbox, stretchзначення align-selfвластивості за замовчуванням змінює лише використовуване значення "властивості перехресного розміру" елемента ( heightу цьому випадку). І, як я розумію, специфікація CSS2.1 , відсоткові висоти обчислюються із зазначеного значення батьківського height, а не його використаного значення. На вказане значення батьківських heightвластивостей не змінюється жодних властивостей flex та є нерухомим auto.

Якщо встановити явний параметр, height: 100%то формально можливо обчислити відсоткову висоту дитини, як і встановлення, height: 100%що htmlдозволяє обчислити висоту відсотків bodyу CSS2.1.

Я знайшов рішення сам, припустимо, у вас є CSS нижче:

.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  height: 100%; <- didn't work
}

У цьому випадку встановити висоту 100% не вийде, тому те, що я роблю, - це встановити margin-bottomправило auto, наприклад:

.child {
  margin-bottom: auto;
}

і дитина буде вирівняна до верхнього з батьків, ви також можете скористатись цим align-selfправилом, якщо ви хочете.

.child {
  align-self: flex-start;
}

Ідея полягала б у тому, що display:flex;з flex-direction: row;заповненням containerdiv .flex-1і з .flex-2, але це не означає, що він .flex-2має за замовчуванням, height:100%;навіть якщо він розширений на повний зріст і мати дочірній елемент ( .flex-2-child), з яким height:100%;вам потрібно буде встановити батьківський height:100%;або використовувати display:flex;з flex-direction: row;на .flex-2DIV теж.

З того, що я знаю display:flex, не збільшиться висота всіх елементів вашої дитини до 100%.

Невелика демонстрація, зняла висоту з .flex-2-childі використовувалась display:flex;на веб-сайті .flex-2: http://jsfiddle.net/2ZDuE/3/

html

<div class="container">
    <div class="flex-1"></div>
    <div class="flex-2">
        <div class="flex-2-child"></div>
    </div>
</div>

css

.container {
    height: 200px;
    width: 500px;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flex-1 {
   flex:1 0 100px;
    background-color: blue;
}
.flex-2 {
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1 0 100%;
    background-color: red;
}
.flex-2-child {
    flex: 1 0 100%;
    height:100%;
    background-color: green;
}

http://jsfiddle.net/2ZDuE/750/

Це також можна вирішити align-self: stretch;на елементі, який ми хочемо розтягнути.

Іноді бажано розтягнути лише один елемент у налаштуваннях флекси.

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  align-self: stretch;
  background-color: red;
}
.flex-2-child {
  background-color: green;
}

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

.container {. . . . вирівняти-предмети: розтягнути; . . . . }

Це моє рішення з використанням css +

Перш за все, якщо перша дитина (flex-1) має бути 100px, не повинна бути flex. Насправді в css + ви можете встановити гнучкі та / або статичні елементи (стовпці чи рядки), і ваш приклад стане таким же простим:

<div class="container">
  <div class="EXTENDER">
    <div class="COLS">
      <div class="CELL _100px" style="background-color:blue">100px</div>
      <div class="CELL _FLEX" style="background-color:red">flex</div>
    </div>
  </div>
</div>

контейнер css:

.container {
    height: 200px;
    width: 500px;
    position:relative;
}

і, очевидно, включають css + 0,2 ядра

почуйте скрипку