How can I tell a flexbox layout row consume the remaining vertical space in a browser window?
I have a 3-row flexbox layout. The first two rows are fixed height, but the 3rd is dynamic and I would like it to grow to the full height of the browser.
I have another flexbox in row-3 which creates a set of columns. To properly adjust elements within these columns I need them to understand the full height of the browser -- for things like background color and item alignments at the base. The major layout would ultimately resemble this:
.vwrapper {_x000D_
display: flex;_x000D_
flex-direction: column;_x000D_
flex-wrap: nowrap;_x000D_
justify-content: flex-start;_x000D_
align-items: stretch;_x000D_
align-content: stretch;_x000D_
//height: 1000px;_x000D_
}_x000D_
.vwrapper #row1 {_x000D_
background-color: red;_x000D_
}_x000D_
.vwrapper #row2 {_x000D_
background-color: blue;_x000D_
}_x000D_
.vwrapper #row3 {_x000D_
background-color: green;_x000D_
flex 1 1 auto;_x000D_
display: flex;_x000D_
}_x000D_
.vwrapper #row3 #col1 {_x000D_
background-color: yellow;_x000D_
flex 0 0 240px;_x000D_
}_x000D_
.vwrapper #row3 #col2 {_x000D_
background-color: orange;_x000D_
flex 1 1;_x000D_
}_x000D_
.vwrapper #row3 #col3 {_x000D_
background-color: purple;_x000D_
flex 0 0 240px;_x000D_
}<body>_x000D_
<div class="vwrapper">_x000D_
<div id="row1">_x000D_
this is the header_x000D_
</div>_x000D_
<div id="row2">_x000D_
this is the second line_x000D_
</div>_x000D_
<div id="row3">_x000D_
<div id="col1">_x000D_
col1_x000D_
</div>_x000D_
<div id="col2">_x000D_
col2_x000D_
</div>_x000D_
<div id="col3">_x000D_
col3_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</body>I've tried adding a height attribute, which does work when I set it to a hard number but not when I set it to 100%. I understand height: 100% isn't working, because the content isn't filling the browser window, but can I replicate the idea using the flexbox layout?
The answer is
set the wrapper to height 100%
.vwrapper {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
height: 100%;
}
and set the 3rd row to flex-grow
#row3 {
background-color: green;
flex: 1 1 auto;
display: flex;
}
Let me show you another way that works 100%. I will also add some padding for the example.
<div class = "container">
<div class = "flex-pad-x">
<div class = "flex-pad-y">
<div class = "flex-pad-y">
<div class = "flex-grow-y">
Content Centered
</div>
</div>
</div>
</div>
</div>
.container {
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
}
.flex-pad-x {
padding: 0px 20px;
height: 100%;
display: flex;
}
.flex-pad-y {
padding: 20px 0px;
width: 100%;
display: flex;
flex-direction: column;
}
.flex-grow-y {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
As you can see we can achieve this with a few wrappers for control while utilising the flex-grow & flex-direction attribute.
1: When the parent "flex-direction" is a "row", its child "flex-grow" works horizontally. 2: When the parent "flex-direction" is "columns", its child "flex-grow" works vertically.
Hope this helps
Daniel
Source: Stackoverflow.com