Make a div fill the remaining vertical space in a column using display: flex

Question

How can I make a div fill up the remaining vertical space using display: flex?

In my example below, the main element should fill up all space not used by the nav. If this worked correctly, we wouldn't see any red.

http://jsfiddle.net/36r3mL36/

HTML:

<nav></nav>
<main></main>

CSS:

body {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: red;
    margin: 0;
}

nav {
    height: 40px;
    background: orange;
}

main {
    display: flex;
    flex: 1;
    background: purple;
}

Justin XL · Accepted Answer · 2014-12-05 03:11:07Z

5

Try adding html next to your body selector.

html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: red;
    margin: 0;
}

However, I would suggest to put the flex stuff inside a container.

html, body, .container {
    height: 100%;
    margin: 0;
}

.container {
    display: flex;
    flex-direction: column;
    background: red;
}

nav {
    height: 40px;
    background: orange;
}

main {
    display: flex;
    flex: 1;
    background: purple;
}

<div class="container">
  <nav></nav>
  <main></main>
</div>

edited Dec 5, 2014 at 3:11

answered Dec 5, 2014 at 3:02

Justin XL

39k7 gold badges91 silver badges134 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Make a div fill the remaining vertical space in a column using display: flex

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related