Я пытаюсь заполнить вертикальное пространство элемента 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
не заполняет необходимую высоту, за исключением двух случаев, когда:
flex-2
имеет высоту 100% (что странно, потому что гибкий элемент по умолчанию имеет 100% + он глючит в Chrome)flex-2-child
имеет абсолютную позицию, что также неудобно
Это не работает в Chrome или Firefox в настоящее время.
height:100%
вместо этого рендерится с естественным ростом. И странная вещь, если я изменю их высоту наauto
, то они будут отображаться так,height:100%
как я пытался это сделать. Это определенно не интуитивно понятно, если так должно работать.Ответы:
использование
align-items: stretch
Как и ответ Дэвида Стори, мой обходной путь:
В качестве альтернативы
align-items
, вы можете использоватьalign-self
только на.flex-2-child
элемент, который вы хотите растянуть.источник
stretch
Это должен быть выбранный ответ.height: 100%
из дочернего компонента тот же рост, что и родительскийheight: 100%
к ответу - я почти сдался и увидел это только в последний момент, прежде чем вернуться кabsolute
- что сопряжено со всеми видами проблем.Я ответил на аналогичный вопрос здесь .
Я знаю, вы уже сказали, что
position: absolute;
это неудобно, но это работает. См. Ниже для получения дополнительной информации об устранении проблемы изменения размера.Также ознакомьтесь с этим jsFiddle для демонстрации, хотя я добавил только префиксы webkit, которые открыты в Chrome.
У вас в основном есть 2 вопроса, с которыми я буду иметь дело отдельно.
position: relative;
на родителя ребенка.position: absolute;
на ребенка.overflow-y: auto;
прокручиваемый div.height: 0;
Посмотрите этот ответ для получения дополнительной информации о проблеме прокрутки.
источник
Если я правильно понимаю, вы хотите, чтобы flex-2-child заполнил высоту и ширину своего родителя, чтобы красная область была полностью покрыта зеленым?
Если это так, вам просто нужно установить flex-2 для использования flexbox:
Затем скажите flex-2-child, чтобы он стал гибким:
Смотрите http://jsfiddle.net/2ZDuE/10/
Причина в том, что flex-2-child не элемент flexbox, а его родитель.
источник
align-items: center
если вы используетеalign-self: stretch
только на одного ребенка.min-height: 100vh;
к.flex-2
элементу, чтобы он работал. Спасибо за помощь!Я полагаю, что поведение Chrome более соответствует спецификации CSS (хотя и менее интуитивно понятно). В соответствии со спецификацией Flexbox
stretch
значениеalign-self
свойства по умолчанию изменяет только используемое значение «свойства поперечного размера» элемента (height
в данном случае). И, как я понимаю в спецификации CSS2.1 , процентные высоты рассчитываются исходя из указанного значения родительского элементаheight
, а не его используемого значения. На указанное значение родительского элементаheight
не влияют никакие свойства flex, и он остается неизменнымauto
.Установка в явном виде
height: 100%
делает возможным формально вычислить процентную высоту дочернего элемента, точно так же, как установкаheight: 100%
вhtml
позволяет вычислять процентную высотуbody
в CSS2.1.источник
height:100%
к.flex-2
. Вот этот jsfiddle .height: 100%
дает очень странные результаты для меня в Chrome. Кажется, что это приводит к тому, что «указанная высота» устанавливается на общую высоту контейнера , а не на высоту самого элемента, поэтому вызывает нежелательную прокрутку, когда другие элементы имеют размеры, рассчитанные относительно него.Я нашел решение самостоятельно, предположим, у вас есть CSS ниже:
В этом случае установка высоты 100% не будет работать, поэтому я установил
margin-bottom
правилоauto
, например:и ребенок будет выровнен по верху родителя, вы также можете использовать
align-self
правило в любом случае, если хотите.источник
Идея заключалась бы в том, чтобы
display:flex;
withflex-direction: row;
заполнялcontainer
div с помощью.flex-1
and.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
CSS
http://jsfiddle.net/2ZDuE/750/
источник
Это также можно решить с
align-self: stretch;
помощью элемента, который мы хотим растянуть.Иногда желательно растянуть только один элемент в настройке flexbox.
источник
.container {. , , , align-items: stretch; , , , , }
источник
Это мое решение с использованием CSS +
Прежде всего, если первый ребенок (flex-1) должен быть 100px, не должен быть flex. В CSS + на самом деле вы можете установить гибкие и / или статические элементы (столбцы или строки) и ваш пример становятся столь же легко , как это:
контейнер css:
и, очевидно, включают ядро CSS + 0,2
услышать скрипку
источник