Если у родительского блока указана высота в min-height
, каким образом может наследовать эту высоту дочерний блок?
height: 100%
у дочернего блока не дает желаемого результата, при изменении position
, тоже есть сложности, в частности с падингами (да можно сделать height: calc(100% - 10px);
), но почему то мне кажется что это решение похожее на костыль. Можно ли как то сделать это более лаконично?
.container{
display: inline-block;
margin-right: 10px;
vertical-align: top;
}
.parent-flex-el{
background-color: white;
padding: 5px 10px;
border: 3px solid black;
width:100px;
margin-bottom: 10px;
}
.flex-el{
background-color: lightgrey;
padding: 5px;
box-sizing: border-box;
display: flex;
flex-flow: column nowrap;
justify-content: center;
height: 100%;
}
.child-flex-el{
width: 100%;
line-height: 20px;
text-align: center;
background-color: yellow;
margin: 5px 0px;
height: 20px;
}
/*-------*/
.fixed-h{
height: 200px;
}
.min-h{
min-height: 200px;
}
.position{
position: relative;
}
.position > *{
position:absolute;
width: 100%;
}
.h-calc > *{
height: calc(100% - 10px);
}
.fl{
display:flex;
flex-flow: row nowrap;
align-items: stretch;
}
.fl > *{
width: 100%;
}
<div class="container">
<p>height: 200px;</p>
<div class="parent-flex-el fixed-h">
<div class="flex-el">
<div class="child-flex-el">one</div>
<div class="child-flex-el">two</div>
<div class="child-flex-el">three</div>
</div>
</div>
</div>
<div class="container">
<p>min-height: 200px;</p>
<div class="parent-flex-el min-h">
<div class="flex-el">
<div class="child-flex-el">one</div>
<div class="child-flex-el">two</div>
<div class="child-flex-el">three</div>
</div>
</div>
</div>
<div class="container">
<p>position: absolute;</p>
<div class="parent-flex-el min-h position">
<div class="flex-el">
<div class="child-flex-el">one</div>
<div class="child-flex-el">two</div>
<div class="child-flex-el">three</div>
</div>
</div>
</div>
<div class="container">
<p>height: calc();</p>
<div class="parent-flex-el min-h position h-calc">
<div class="flex-el">
<div class="child-flex-el">one</div>
<div class="child-flex-el">two</div>
<div class="child-flex-el">three</div>
</div>
</div>
</div>
<div class="container">
<p>flex</p>
<div class="parent-flex-el min-h fl">
<div class="flex-el">
<div class="child-flex-el">one</div>
<div class="child-flex-el">two</div>
<div class="child-flex-el">three</div>
</div>
</div>
</div>