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 should expand to fill the container   The problem is that as the main content expands  it squishes the header and footer rows     HTML    lt section gt     lt header gt      header  sized to content      lt br gt  but is it really      lt  header gt     lt div gt      main content  fills remaining space lt br gt      x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt       lt  -- uncomment to see it break - - gt      x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt      x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt      x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt      x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt       lt  -- -- gt     lt  div gt     lt footer gt      footer  fixed height in px    lt  footer gt   lt  section gt    CSS   section     display  flex    flex-flow  column    align-items  stretch    height  300px    header     flex  0 1 auto    background  tomato    div     flex  1 1 auto    background  gold    overflow  auto    footer     flex  0 1 60px    background  lightgreen       fixes the footer  min-height  60px         Fiddle    http   jsfiddle net 7yLFL 1     working  with small content  http   jsfiddle net 7yLFL     broken  with larger content    I m in the lucky situation that I can use the latest and greatest in CSS  disregarding legacy browsers  I thought I could use the flex layout to finally get rid of the old table-based layouts  For some reason  it s not doing what I want     For the record  there are many related questions on SO about  filling the remaining height   but nothing that solves the problem I m having with flex  Refs    Make a div fill the height of the remaining screen space Fill remaining vertical space - only CSS Have a div to fill out the remaining height width of a container when sharing it with another div  Make nested div stretch to 100  of remaining container div height How can I make my flexbox layout take 100  vertical space  etc

User · Answer

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

User · Answer

Make it simple    DEMO   x000D   x000D  section   x000D    display  flex  x000D    flex-flow  column  x000D    height  300px  x000D    x000D   x000D  header   x000D    background  tomato  x000D       no flex rules  it will grow    x000D    x000D   x000D  div   x000D    flex  1      1 and it will fill whole space left if no flex value are set to other children   x000D    background  gold  x000D    overflow  auto  x000D    x000D   x000D  footer   x000D    background  lightgreen  x000D    min-height  60px      min-height has its purpose      unless you meant height   x000D    x000D   lt section gt  x000D     lt header gt  x000D      header  sized to content x000D       lt br  gt  but is it really   x000D     lt  header gt  x000D     lt div gt  x000D      main content  fills remaining space lt br gt  x x000D       lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt  x000D       lt  -- uncomment to see it break -- gt  x000D      x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt  x x000D       lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt  x x000D       lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt  x x000D       lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt  x000D       lt  -- -- gt  x000D     lt  div gt  x000D     lt footer gt  x000D      footer  fixed height in px x000D     lt  footer gt  x000D   lt  section gt  x000D   x000D   x000D    Full screen version    x000D   x000D  section   x000D    display  flex  x000D    flex-flow  column  x000D    height  100vh  x000D    x000D   x000D  header   x000D    background  tomato  x000D       no flex rules  it will grow    x000D    x000D   x000D  div   x000D    flex  1  x000D       1 and it will fill whole space left if no flex value are set to other children   x000D    background  gold  x000D    overflow  auto  x000D    x000D   x000D  footer   x000D    background  lightgreen  x000D    min-height  60px  x000D       min-height has its purpose      unless you meant height   x000D    x000D   x000D  body   x000D    margin  0  x000D    x000D   lt section gt  x000D     lt header gt  x000D      header  sized to content x000D       lt br  gt  but is it really   x000D     lt  header gt  x000D     lt div gt  x000D      main content  fills remaining space lt br gt  x x000D       lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt  x000D       lt  -- uncomment to see it break -- gt  x000D      x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt  x x000D       lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt  x x000D       lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt  x x000D       lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt  x000D       lt  -- -- gt  x000D     lt  div gt  x000D     lt footer gt  x000D      footer  fixed height in px x000D     lt  footer gt  x000D   lt  section gt  x000D   x000D   x000D

User · Answer

A more modern approach would be to use the grid property    x000D   x000D  section   x000D    display  grid  x000D    align-items  stretch  x000D    height  300px  x000D    grid-template-rows  min-content auto 60px  x000D    x000D  header   x000D    background  tomato  x000D    x000D  div   x000D    background  gold  x000D    overflow  auto  x000D    x000D  footer   x000D    background  lightgreen  x000D    x000D   lt section gt  x000D     lt header gt  x000D      header  sized to content x000D       lt br gt  but is it really   x000D     lt  header gt  x000D     lt div gt  x000D      main content  fills remaining space lt br gt  x000D      x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt  x000D       x000D      x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt  x000D      x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt  x000D      x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt  x000D      x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt  x000D       x000D     lt  div gt  x000D     lt footer gt  x000D      footer  fixed height in px x000D     lt  footer gt  x000D   lt  section gt  x000D   x000D   x000D

User · Answer

Use the flex-grow property to the main content div and give the dispaly  flex  to its parent    x000D   x000D  body   x000D      height  100   x000D      position  absolute  x000D      margin  0  x000D    x000D  section   x000D    height  100   x000D    display  flex  x000D    flex-direction   column  x000D    x000D  header   x000D    background  tomato  x000D    x000D  div   x000D    flex  1     or flex-grow  1      x000D    overflow-x  auto  x000D    background  gold  x000D    x000D  footer   x000D    background  lightgreen  x000D    min-height  60px  x000D    x000D   lt section gt  x000D     lt header gt  x000D      header  sized to content x000D       lt br gt  but is it really   x000D     lt  header gt  x000D     lt div gt  x000D      main content  fills remaining space lt br gt  x000D      x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt  x000D      x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt  x000D      x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt  x000D      x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt  x000D      x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt x lt br gt  x000D     lt  div gt  x000D     lt footer gt  x000D      footer  fixed height in px x000D     lt  footer gt  x000D   lt  section gt  x000D   x000D   x000D

User · Answer

The example below includes scrolling behaviour if the content of the expanded centre component extends past its bounds   Also the centre component takes 100  of remaining space in the viewport   jsfiddle here  html  body   r flex container      height  100       display  flex      flex-direction  column      background  red      margin  0     r flex container       display flex      flex-flow  column nowrap      background-color blue      r flex fixed child       flex none      background-color black      color white      r flex expand child       flex auto      background-color yellow      overflow-y scroll      Example of html that can be used to demonstrate this behaviour   lt html gt   lt body gt       lt div class  r flex container  gt         lt div class  r flex fixed child  gt           lt p gt  This is the fixed  header  child of the flex container  lt  p gt         lt  div gt         lt div class  r flex expand child  gt               lt article gt this child container expands to use all of the space given to it -  but could be shared with other expanding childs in which case they would get equal space after the fixed container space is allocated   Lorem ipsum dolor sit amet  consectetuer adipiscing elit  Aenean commodo ligula eget dolor  Aenean massa  Cum sociis natoque penatibus et magnis dis parturient montes  nascetur ridiculus mus  Donec quam felis  ultricies nec  pellentesque eu  pretium quis  sem  Nulla consequat massa quis enim  Donec pede justo  fringilla vel  aliquet nec  vulputate eget  arcu  In enim justo  rhoncus ut  imperdiet a  venenatis vitae  justo  Nullam dictum felis eu pede mollis pretium  Integer tincidunt  Cras dapibus  Vivamus elementum semper nisi  Aenean vulputate eleifend tellus  Aenean leo ligula  porttitor eu  consequat vitae  eleifend ac  enim  Aliquam lorem ante  dapibus in  viverra quis  feugiat a  tellus  Phasellus viverra nulla ut metus varius laoreet  Quisque rutrum  Aenean imperdiet  Etiam ultricies nisi vel augue  Curabitur ullamcorper ultricies nisi  Nam eget dui  Etiam rhoncus  Maecenas tempus  tellus eget condimentum rhoncus  sem quam semper libero  sit amet adipiscing sem neque sed ipsum  Nam quam nunc  blandit vel  luctus pulvinar  hendrerit id  lorem  Maecenas nec odio et ante tincidunt tempus  Donec vitae sapien ut libero venenatis faucibus  Nullam quis ante  Etiam sit amet orci eget eros faucibus tincidunt  Duis leo  Sed fringilla mauris sit amet nibh  Donec sodales sagittis magna  Sed consequat  leo eget bibendum sodales  augue velit cursus nunc               lt  article gt         lt  div gt         lt div class  r flex fixed child  gt          this is the fixed footer child of the flex container         asdfadsf          lt p gt  another line lt  p gt         lt  div gt        lt  div gt   lt  body gt   lt  html gt

[css] Fill remaining vertical space with CSS using display:flex

Examples related to css

Examples related to layout

Examples related to flexbox