Как сделать flexbox детей 100% высоты своего родителя?

Ответ 1

Я ответил на аналогичный вопрос здесь.

Я знаю, что вы уже сказали, что position: absolute; неудобно, но он работает. См. Ниже дополнительную информацию об исправлении проблемы изменения размера.

Также см. этот jsFiddle для демонстрации, хотя я только добавил префиксы webkit, открытые в Chrome.

У вас в основном есть 2 вопроса, которые я буду рассматривать отдельно.

• Получение дочернего элемента flex-item для заполнения высоты 100%
  • Установите position: relative; в родительский элемент дочернего элемента.
  • Задайте position: absolute; для дочернего элемента.
  • Затем вы можете установить ширину/высоту по мере необходимости (100% в моем примере).
• Фиксирование прокрутки прокрутки "quirk" в Chrome
  • Поместите overflow-y: auto; в прокручиваемый div.
  • Прокручиваемый div должен иметь определенную высоту. Мой образец уже имеет высоту 100%, но если ни один из них уже не применяется, вы можете указать height: 0;

Подробнее о проблеме прокрутки см. в этом .

Ответ 2

Если я правильно понял, вы хотите, чтобы flex-2-child заполнил высоту и ширину своего родителя, так что красная область полностью покрыта зеленым цветом?

Если это так, вам просто нужно установить flex-2 для использования flexbox:

.flex-2 {
    display: flex;  
}

Затем скажите flex-2-child, чтобы он стал гибким:

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

См. http://jsfiddle.net/2ZDuE/10/

Причина в том, что flex-2-child не является элементом flexbox, но его родительский.

Ответ 3

Используйте align-items: 'stretch'

Как и в случае с ответом Дэвида Стори, я работаю над

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

В качестве альтернативы align-items вы можете использовать align-self только для элемента .flex-2-child, который вы хотите растянуть.

Ответ 4

Я полагаю, что поведение Chrome более соответствует спецификации CSS (хотя и менее интуитивно понятной). Согласно спецификации Flexbox значение по умолчанию stretch свойства align-self изменяет только используемое значение элемента "свойство кросс-размера" (height, в этом случае). И, как я понимаю спецификацию CSS2.1, процентные высоты вычисляются из указанного значения родительского height, а не его используемого значения, Указанное значение родительского height не зависит от каких-либо свойств гибкости и все еще auto.

Настройка явного height: 100% позволяет формально вычислить процентную высоту дочернего элемента, так же как установка height: 100% - html позволяет рассчитать процентную высоту body в CSS2.1.

Ответ 5

Я нашел решение самостоятельно, предположим, что у вас есть 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;
}

Ответ 6

Идея заключалась бы в том, что display:flex; с flex-direction: row; заполняет div container .flex-1 и .flex-2, но это не означает, что .flex-2 имеет значение по умолчанию height:100%;, даже если оно расширенный до полной высоты и имеющий дочерний элемент (.flex-2-child) с height:100%;, вам нужно установить родительский элемент height:100%; или использовать display:flex; с помощью flex-direction: row; в div .flex-2.

Из того, что я знаю, display:flex не будет увеличивать высоту всех ваших дочерних элементов до 100%.

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

Ответ 7

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/

Ответ 8

Одним из решений, которое я нашел, было добавить display: grid; к .flex-2-child.

.flex-2-child {
    display: grid;
}

Ответ 9

Это также можно решить с помощью align-self: stretch; на элементе, который мы хотим растянуть.

Иногда желательно растянуть только один элемент в настройке flexbox.

.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>

Ответ 10

.container {. , , , align-items: stretch; , , , , }

Ответ 11

Это мое решение, используя css +

Прежде всего, если первый ребенок (flex-1) должен быть 100px не должен быть гибким. В 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 core

услышать fiddle