Fill remaining vertical space - only CSS

Question

I need to fill the remaining vertical space of #wrapper under #first with #second div.

I need an only CSS sol

Answer 1

If you don't want to have fix heights for your main-container (top, bottom, ....), you can simply use this css-file to get a flex-container which uses the remaining space incl. working!!! scrollbars

Fiddler

    
    

  


  


  

    
Cell 1: flex1
    

    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
x
x
x
x
x
x
x
x
x


    
    
Cell 3: flex1