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

Use the flex-grow property to the main content div and give the dispaly: flex; to its parent;

body {
    height: 100%;
    position: absolute;
    margin: 0;
}
section {
  height: 100%;
  display: flex;
  flex-direction : column;
}
header {
  background: tomato;
}
div {
  flex: 1; /* or flex-grow: 1  */;
  overflow-x: auto;
  background: gold;
}
footer {
  background: lightgreen;
  min-height: 60px;
}

  

    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

  
  

    footer: fixed height in px