Full-page / holy Grail layout with flex

Question

I am trying to use Flexbox with the latest browsers (FF 36, Chrome 41, Opera 28, Safari 8) to achieve full-page holy grail layout. I've gotten it working in everything but Firefox.

The page is split vertically into header, main, footer. main is then split horizontally into three panels. Each panel should scroll independently if their content overflows their bounds. Firefox is the only one that will not do this.

Here is my 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 to auto */
    display: flex;
    flex-direction: row;
  }

  .panel {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    overflow: auto;
  }

What I don't understand even after reading the spec is how to make #main only use the height allocated to them by the parent. Instead FF seems to make their "intrinsic height" the height of all the child elements. What makes this work in all other browsers but not FF? Bonus points for pointing out the correct section of the spec that explains this.

Answer 1

Ok, so setting min-height: 0px on #main fixes Firefox and keeps everyone else happy.

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

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

Couldn't quite explain it but then found this in the spec:

By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element). To change this, set the min-width or min-height property. (See Implied Minimum Size of Flex Items.)

main's minimum content height is the height of all its children, the panels. By giving that container explicit permission to be smaller than that, it maxes out at the height of its parent. Chrome/Safari/Opera were happy with a flex-basis: 0px, but Firefox needed min-height in addition to that.

Can anyone tell if this is a violation of the spec? Is FF being too strict or the other browsers being too lenient?