Flexbox overflow scrollbar displaying on body instead of inner elements

Question

The Problem:

In a full-size app layout (100% width, 100% height) using flexbox with overflow, the scrollbars do not display for overflow-y in Firefo

Answer 1

When using percent for height on element, all its ascendants also need a height set, and if all will have percent, one need to set it all the way up to the html/body.

When combined with Flexbox this can get really tricky to solve, as when one need to set height: 100% on all ascendants, other unwanted render issues can cause the layout to break.

Here is one solution, which work perfect cross browser, where an extra wrapper, canvas-fix, for the canvas is added, and then with position: absolute we can make this work.

Fiddle demo

Stack snippet

html {
  height: 100%;
}
.flex-grow {
  flex: 1;
}
.canvas-wrapper {
  flex-grow: 1;                     /*  take all remaining space  */
  width: 100%;                      /*  full width  */
  position: relative;               /*  for the absolute positioned fix  */
}
.canvas-fix {                       /*  added rule  */
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: scroll;
}
.canvas {
  width: 3000px;
  height: 3000px;
}

  


    

      
Top Bar
    

    


      

        

          

            

               Canvas
            
          
        
        

          Canvas Footer
        
      

      

        
Sidebar
      

    

    

      
Overall Footer