How can I make my flexbox layout take 100 vertical space

Question

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      x000D   x000D   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    x000D   lt body gt  x000D       lt div class  vwrapper  gt  x000D           lt div id  row1  gt  x000D              this is the header x000D           lt  div gt  x000D           lt div id  row2  gt  x000D              this is the second line x000D           lt  div gt  x000D           lt div id  row3  gt  x000D               lt div id  col1  gt  x000D                  col1 x000D               lt  div gt  x000D               lt div id  col2  gt  x000D                  col2 x000D               lt  div gt  x000D               lt div id  col3  gt  x000D                  col3 x000D               lt  div gt  x000D           lt  div gt  x000D       lt  div gt  x000D   lt  body gt  x000D   x000D   x000D    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

User · Answer

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

User · Answer

You should set height of html  body   wrapper to 100   in order to inherit full height  and then just set a flex value greater than 1 to  row3 and not on the others   x000D   x000D   wrapper  html  body       height  100       margin  0     wrapper       display  flex      flex-direction  column     row1       background-color  red     row2       background-color  blue     row3       background-color  green      flex 2      display  flex     col1       background-color  yellow      flex  0 0 240px      min-height  100     chrome needed it a question time   not anymore       col2       background-color  orange      flex  1 1      min-height  100     chrome needed it a question time   not anymore       col3       background-color  purple      flex  0 0 240px      min-height  100     chrome needed it a question time   not anymore      x000D   lt div class  wrapper  gt       lt div id  row1  gt this is the header lt  div gt       lt div id  row2  gt this is the second line lt  div gt       lt div id  row3  gt           lt div id  col1  gt col1 lt  div gt           lt div id  col2  gt col2 lt  div gt           lt div id  col3  gt col3 lt  div gt       lt  div gt   lt  div gt  x000D   x000D   x000D   DEMO

User · Answer

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      demo

[html] How can I make my flexbox layout take 100% vertical space?

Examples related to html

Examples related to css

Examples related to flexbox