Я пытаюсь сделать так, чтобы верхний дочерний элемент в контейнере автоматически увеличивал высоту до 100%, если второй дочерний элемент (поле) не существует. Это хороший метод?
.container{
position:absolute;
display:flex;
flex-direction:column;
justify-content:stretch;
width:200px;
height:300px;
border:1px solid blue;
}
.item{
flex-grow:1;
width:100%;
border:1px solid red;
}
.bar{
position:relative;
height:40px;
background:red;
width:100%;
}
<div class='container'>
<div class='item'>One</div>
<div class='bar'>Two</div>
</div>
о сжатие
Могу ли я сделать то же самое, если и элемент, и полоса имеют абсолютное положение?
Нет. Как только дочерний элемент гибкого контейнера позиционируется абсолютно, он больше не принимает (большинство) гибких свойств. w3.org/TR/css-flexbox-1/#abspos-items