Fill remaining vertical space with CSS using display:flex

by

Make it simple : DEMO

section {
  display: flex;
  flex-flow: column;
  height: 300px;
}

header {
  background: tomato;
  /* no flex rules, it will grow */
}

div {
  flex: 1;  /* 1 and it will fill whole space left if no flex value are set to other children*/
  background: gold;
  overflow: auto;
}

footer {
  background: lightgreen;
  min-height: 60px;  /* min-height has its purpose :) , unless you meant height*/
}
<section>
  <header>
    header: sized to content
    <br/>(but is it really?)
  </header>
  <div>
    main content: fills remaining space<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- uncomment to see it break -->
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- -->
  </div>
  <footer>
    footer: fixed height in px
  </footer>
</section>

Full screen version 

section {
  display: flex;
  flex-flow: column;
  height: 100vh;
}

header {
  background: tomato;
  /* no flex rules, it will grow */
}

div {
  flex: 1;
  /* 1 and it will fill whole space left if no flex value are set to other children*/
  background: gold;
  overflow: auto;
}

footer {
  background: lightgreen;
  min-height: 60px;
  /* min-height has its purpose :) , unless you meant height*/
}

body {
  margin: 0;
}
<section>
  <header>
    header: sized to content
    <br/>(but is it really?)
  </header>
  <div>
    main content: fills remaining space<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- uncomment to see it break -->
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- -->
  </div>
  <footer>
    footer: fixed height in px
  </footer>
</section>

More Related Contents:

  1. What’s the difference between align-content and align-items?
  2. Scrolling a flexbox with overflowing content
  3. Horizontal masonry layout with flexbox CSS only [duplicate]
  4. How to create one vertical column in between rows in Flexbox [closed]
  5. Why is a flex item limited to parent size?
  6. Equal height rows in CSS Grid Layout
  7. How to make flexbox items the same size?
  8. Align 3 unequal blocks left, center and right
  9. My position: sticky element isn’t sticky when using flexbox
  10. What do “flex” and “justify-content” achieve that “text-align” doesn’t?
  11. How to style a div to be a responsive square? [duplicate]
  12. How can I make a div span multiple rows and columns in a grid?
  13. Usage of display property of flex box items
  14. firefox overflow-y not working with nested flexbox
  15. Removing display:flex adds spaces around a link. Why?
  16. Padding-bottom/top in flexbox layout
  17. How to specify an element after which to wrap in css flexbox? [duplicate]
  18. CSS3 Flexbox: display: box vs. flexbox vs. flex
  19. Create a row of flexbox items with a max height defined by one child [duplicate]
  20. How do I get a flexbox to have a center fixed and a bottom fixed children together?
  21. Prevent flex items from overflowing a container
  22. Can flex items wrap in a container with dynamic height?
  23. How to fix unexpected column order in bootstrap 4?
  24. Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?
  25. How to exclude the first item in a flexbox wrap?
  26. Row Wrap in flex-box not wrapping in Safari
  27. flexbox vs tables, why do we need flexbox?
  28. ml-auto is not pushing navbar links to the right
  29. CSS Flexbox: difference between align-items and align-content [duplicate]
  30. First-child full-width in Flexbox

Leave a Comment