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

Here is the codepen demo showing the solution:

• Demo - Fill remaining vertical space with CSS using display:flex

Important highlights:

• all containers from html, body, ... .container, should have the height set to 100%
• introducing flex to ANY of the flex items will trigger calculation of the items sizes based on flex distribution:
  • if only one cell is set to flex, for example: flex: 1 then this flex item will occupy the remaining of the space
  • if there are more than one with the flex property, the calculation will be more complicated. For example, if the item 1 is set to flex: 1 and the item 2 is se to flex: 2 then the item 2 will take twice more of the remaining space
    • NOT TRUE: the item 2 will be twice larger than the item 1
    • check more about the concept of the remaining space: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
• Main Size Property
  • depends on the value of the flex-direction property
  • in our case height is just a preferred size
  • it will be overwritten in the presence of flex property: https://www.w3.org/TR/css-flexbox-1/#propdef-flex
    • When a box is a flex item, flex is consulted instead of the main size property to determine the main size of the box
  • min-* and max-* will be respected