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.

enter image description here

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:

enter image description here

.vwrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    //height: 1000px;
}
.vwrapper #row1 {
    background-color: red;
}
.vwrapper #row2 {
    background-color: blue;
}
.vwrapper #row3 {
    background-color: green;
    flex 1 1 auto;
    display: flex;
}
.vwrapper #row3 #col1 {
    background-color: yellow;
    flex 0 0 240px;
}
.vwrapper #row3 #col2 {
    background-color: orange;
    flex 1 1;
}
.vwrapper #row3 #col3 {
    background-color: purple;
    flex 0 0 240px;
}

<body>
    <div class="vwrapper">
        <div id="row1">
            this is the header
        </div>
        <div id="row2">
            this is the second line
        </div>
        <div id="row3">
            <div id="col1">
                col1
            </div>
            <div id="col2">
                col2
            </div>
            <div id="col3">
                col3
            </div>
        </div>
    </div>
</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?

Upvote for the visuals, how did you make em? – Jonathan Apr 15 '14 at 17:08 — Jonathan, Apr 15 '14 at 17:08
OmniGraffle, and Pixelmator for touchups. – Nicholas Pappas Apr 15 '14 at 17:14 — Nicholas Pappas, Apr 15 '14 at 17:14

G-Cyrillus · Accepted Answer · 2020-07-30T13:38:58.623

160

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.

.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 */
}

<div class="wrapper">
    <div id="row1">this is the header</div>
    <div id="row2">this is the second line</div>
    <div id="row3">
        <div id="col1">col1</div>
        <div id="col2">col2</div>
        <div id="col3">col3</div>
    </div>
</div>

DEMO

edited Jul 30 '20 at 13:38

answered Apr 15 '14 at 17:22

G-Cyrillus

94,270
13
95
118

Any way to do this while also having the content divs expand to fill their contents? [Forked your example here](http://fiddle.jshell.net/Lhhh3wde/). – iameli May 06 '15 at 00:33
@iameli , use min-height for chrome instead height http://fiddle.jshell.net/Lhhh3wde/1/ – G-Cyrillus May 06 '15 at 07:20
2

The JSFiddle is brokened – Joel Peltonen Feb 01 '19 at 09:58
2

Here is the working codepen demo: https://codepen.io/mprinc/pen/JjGQvae and explanation in the similar question: https://stackoverflow.com/a/63174085/257561 – mPrinC Jul 30 '20 at 13:20
fiddle replaced by a codepen that should not vanish, it's a copy of the snippet . **Note** that min-height is not needed anymore in today's chrome version. – G-Cyrillus Jul 30 '20 at 13:40
Setting 100% to body, html and the container after that and so on definitely works. – Leslie YJ Nov 16 '20 at 02:16
@G-Cyrillus If you put content in `col2` that overflows the screen height and you scroll down, the columns are not growing. Can you fix that somehow? – Toxiro Jan 13 '21 at 13:39
@Toxiro Sounds like that's a new question that you should post. – trusktr May 01 '21 at 07:06

score 25 · Answer 2 · answered Apr 15 '14 at 17:20

25

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

answered Apr 15 '14 at 17:20

vals

58,159
11
81
129

5

In my case html, body, .wrapper { height : 100%; } is working. not only wrapper working. – gnganapath Jul 22 '15 at 10:34

score 5 · Answer 3 · answered May 20 '19 at 23:31

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

Nice..! This is the only example which managed to make my "content"
(in between my header and footer) fill the entire screen height. All the other examples seem to ignore the "height:100%" attribute. — Mike Gledhill, Jun 28 '20 at 12:26
It is a cool solutions. I know John says above DIV overkill, but I do not agree. You need the four divs to utilise flex grow both horizontally and vertically (Vertically been the important one!). Glad I could help ! Having the four DIVs gives you a lot of flexibility. Once you start trying to remove DIVs , that flexibility starts to wither ! — GaddMaster, Jun 29 '20 at 13:06

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

3 Answers3

Linked

Related