CODEWITHSUNDEEP
csslayoutflexbox
Don P
Don P

Reputation: 63567

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

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;
}

Upvotes: 2

Views: 637

Answers (1)

Justin XL
Justin XL

Reputation: 39006

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>

Upvotes: 5

Related Questions