Высота 100% на дочернем столбце flexbox [дубликат]

этот вопрос уже есть ответ здесь:

у меня возникли проблемы с колонкой flexbox в том, что дети элемента flex'D не отвечают на height в процентах. Я только проверил это в Chrome, и из того, что я понимаю, это проблема только для Chrome. Вот мой пример:

HTML

<div class='flexbox'>
  <div class='flex'>
    <div class='flex-child'></div>
  </div>
  <div class='static'></div>
</div>

CSS

.flexbox{
  position:absolute;
  background:black;
  width:100%;
  height:100%;

  display: flex;
  flex-direction:column;
}

.flex{
  background:blue;
  flex:1;
}

.flex-child{
  background:red;
  height:100%;
  width:100%;
  display:block;
}

.static{
  background:green;
  width:100%;
  height:5rem;
}

вот сайт CodePen.

Я так хочу красный .flex-child заполняет синий .flex. Почему бы и нет height:100% работы?

1 71
css flexbox google-chrome height percentage

1 ответ:

TL; DR: Set .flex до display:flex, и избавиться от height:100% on .flex-child. вы можете увидеть измененный CodePen здесь.

почему это работает:

узнал от этот же вопрос, что в соответствии с на основе спецификаций, в align-self:stretch значение (значение по умолчанию для гибкого элемента б) изменения только использовать значение свойства кросс-размера элемента (в данном случае height). Проценты однако рассчитываются из указано значение свойства кросс-размера родителя, а не его используемого значения. Если вы когда-нибудь взломать ваш инспектор и посмотреть height:100% в разделе "стили", но height:1200px в разделе "вычислено", то это показывает вам указано и используется значения соответственно.

кажется, что Chrome следует спецификации на тройник в этом отношении. Это означает, что установка height:100% on .flex-child означает 100% от указанного height of .flex. Так как мы не указали height on .flex, Это означает, что мы захватываем 100% по умолчанию height, которая составляет auto. Видите, почему механизм компоновки запутывается?

задание .flex до display:flex удаления height:100% С .flex-child (Так что он не пытается установить 100%auto) составит .flex-child заполнить все .flex

когда это не работает:

это не будет работать, если вы пытаетесь заполнить только несколько из .flex, исх. пытаюсь установить .flex-child до height:90%, потому что сгибание ребенка означает, что он заполнит все доступное пространство. Я думал, что вы могли бы взломать его с абсолютным позиционированием, но это, похоже, тоже не работает. Вы можете взломать, добавив второго ребенка в .flex что мы называем .spacer, а параметр .spacer до flex:1 и .flex-child до flex:9 (не забудьте указать flex-direction:column on .flex тоже). Хак, но только так я мог это исправить. здесь Сайт CodePen.

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

104