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

by

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

More Related Contents:

  1. Flexbox: center horizontally and vertically
  2. CSS-only masonry layout
  3. Make container shrink-to-fit child elements as they wrap
  4. When flexbox items wrap in column mode, container does not grow its width
  5. One flex/grid item sets the size limit for siblings
  6. Why are flex items not wrapping?
  7. Align an element to bottom with flexbox
  8. Make background color extend into overflow area
  9. Center text over an image in flexbox
  10. Force flex item to span full row width
  11. Why can’t be flex containers?
  12. Prevent flex items from rendering side to side
  13. Rendering problems using flexbox in Firefox and Chrome 48 [duplicate]
  14. What’s the difference between flex-start and baseline?
  15. Equal space between flex items
  16. How can I make a display:flex container expand horizontally with its wrapped contents?
  17. Text not centered with justify-content: center
  18. How to stretch flex child to fill height of the container?
  19. Flexbox resize and scrollable overflow [duplicate]
  20. How can I show three columns per row?
  21. CSS object-fit: contain; is keeping original image width in layout
  22. Flexbox on IE11: image stretched for no reason?
  23. extra space when centering elements using flexbox
  24. Height is not correct in flexbox items in Chrome [duplicate]
  25. How to make a flex item not fill the height of the flex container? [duplicate]
  26. Can flexbox detect when a flex item wraps?
  27. Vertical scroll rendering issue in Flexbox in Firefox [duplicate]
  28. Flexbox layout with two equal height children, one containing nested flexbox with scrolling content
  29. Alignment of content vertically in adjacent flexbox containers
  30. Flex elements ignore percent padding in Firefox

Leave a Comment