css - Full-page / holy Grail layout with flex -

i trying use flexbox latest browsers (ff 36, chrome 41, opera 28, safari 8) achieve full-page holy grail layout. i've gotten working in firefox.

the page split vertically header, main, footer. main split horizontally 3 panels. each panel should scroll independently if content overflows bounds. firefox 1 not this.

here example: http://jsfiddle.net/bpnjx3v9/1/

    html, body {     margin: 0;     height: 100vh;     width: 100vw;     display: flex;     flex-direction: column;     background-color: blue;   }    #header, #footer {     flex: 0 0 100px;     background-color: blue;   }    #main {     background-color: yellow;     flex: 1 0 0px; /** don't set parent of component auto */     display: flex;     flex-direction: row;   }    .panel {     display: flex;     flex-direction: column;     flex: 1 0 auto;     overflow: auto;   } 

what don't understand after reading spec how make #main use height allocated them parent. instead ff seems make "intrinsic height" height of child elements. makes work in other browsers not ff? bonus points pointing out correct section of spec explains this.

ok, setting min-height: 0px on #main fixes firefox , keeps else happy.

http://jsfiddle.net/hughes_matt/bpnjx3v9/7/

#main {   background-color: yellow;   flex: 1 0 0px; /** don't set parent of component auto */   display: flex;   flex-direction: row; } 

couldn't quite explain found in spec:

by default, flex items won’t shrink below minimum content size (the length of longest word or fixed-size element). change this, set min-width or min-height property. (see implied minimum size of flex items.)

main's minimum content height height of children, panels. giving container explicit permission smaller that, maxes out @ height of parent. chrome/safari/opera happy flex-basis: 0px, firefox needed min-height in addition that.

can tell if violation of spec? ff being strict or other browsers being lenient?