Fill remaining vertical space with CSS using display:flex

Question

In a 3-row layout:

• the top row should be sized according to its contents
• the bottom row should have a fixed height in pixels
• the middle row s

Answer 1

A more modern approach would be to use the grid property.

section {
  display: grid;
  align-items: stretch;
  height: 300px;
  grid-template-rows: min-content auto 60px;
}
header {
  background: tomato;
}
div {
  background: gold;
  overflow: auto;
}
footer {
  background: lightgreen;
}

  

    header: sized to content
    
(but is it really?)
  
  

    main content: fills remaining space

    x
x
x
x
x
x
x
x
x
x

    
    x
x
x
x
x
x
x
x
x

    x
x
x
x
x
x
x
x
x

    x
x
x
x
x
x
x
x
x

    x
x
x
x
x
x
x
x
x

    
  
  

    footer: fixed height in px