Max Solid Max Solid -4 years ago 192
Sass (Sass) Question

Flexbox column stretch on Childs height?

Im trying to build up a layout with flex box that needs to be dynamic to be used for certain use cases. I got a wrapper called

.app-content-inside
that uses 100% height of the viewport - the header and 100% of the viewport - the navigation bar on the left. This works fine so far.

.app-body-inner {
padding: 0 !important;
position: relative;
width: inherit;
height: calc(100vh - 40px); /* changed for demo */
overflow: hidden;
}


I use the class
.nrow-col
to add flex box column to certain
div
. If inside this div another one with the class
.nrow-row
exists this flexbox column child should be stretched to remaining vertical free space.

.nrow-col {
display: flex;
flex-direction: column;
height: inherit;
}

.nrow-col > .nrow-row {
flex: auto;
}


To add flex box row I use the following class:

.nrow-row {
display: flex;
flex-direction: row;
}


This works for the first instance but if I use HTML like this the inner flexbox column child is not stretched anymore:

<div class="app-body-inner">
<div class="nrow-col">
<div class="p-a top">
topbar
</div>
<div class="row no-gutter nrow-row">
<div class="col-sm-2">
<div class="nrow-col">
<div class="p-a top">
coltop
</div>
<div class="nrow-row">
<div class="nrow-body">
<div class="nrow-inner">
/\<br>
this should stretch between coltop and colbottom<br>
\/
</div>
</div>
</div>
<div class="p-a bottom">
colbottom
</div>
</div>
</div>
<div class="col-sm-10">
<div class="nrow-col">
<div class="p-a top">
coltop
</div>
<div class="p-a top">
coltop_another
</div>
<div class="row nrow-row">
<div class="nrow-body">
<div class="nrow-inner">
/\<br>
this should stretch between coltop_another and colbottom<br>
\/
</div>
</div>
</div>
<div class="p-a bottom">
colbottom
</div>
</div>
</div>
</div>
<div class="p-a bottom">
bottombar
</div>
</div>
</div>


It is indeed very difficult to get my problem into text so I created a plunkr that visualizes the problem I'm faced with...

Maybe somebody can help me

Answer Source

If you make the nested parent containers into flex containers, they will automatically apply align-items: stretch to the children, causing them to consume all available height.

Here's what you need to add:

.col-sm-2, .col-sm-10 {
    display: flex;
}

revised demo

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download