Как я могу сделать детей Flexbox на 100% ростом их родителей?

Я пытаюсь заполнить вертикальное пространство элемента Flex внутри 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.

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

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

Посмотрите этот ответ для получения дополнительной информации о проблеме прокрутки.

Если я правильно понимаю, вы хотите, чтобы 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, а его родитель.

Я полагаю, что поведение 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;with flex-direction: row;заполнял containerdiv с помощью .flex-1and .flex-2, но это не значит, что он .flex-2имеет значение по умолчанию, height:100%;даже если оно расширено до полной высоты и имеет дочерний элемент ( .flex-2-child), с которым height:100%;вам нужно установить родительский параметр height:100%;или использовать display:flex;с flex-direction: row;на.flex-2 DIV тоже.

Из того, что я знаю 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;помощью элемента, который мы хотим растянуть.

Иногда желательно растянуть только один элемент в настройке 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>

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

Это мое решение с использованием 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

услышать скрипку