Chrome 43 Flexbox flex-grow issue

Question

Before Chrome 43, div1 would take up 10% of the container height regardless of its childrens size, and div1 would overflow. As of Chrome 43 div1 doesnt follow flex-grow anyone more and instead grows to its childrens size. Is this supposed to work this way? How do i get div1 to overflow and follow its flex-grow property. Thanks!

Heres a jsfiddle: http://jsfiddle.net/HorseFace/xsbmmf4o/

 <div id="container">
    <div id="div1">
        <div id="inner1"></div>
    </div>
    <div id="div2">
        <div id="inner2"></div>
    </div>
</div>

    #container {
        height: 500px;
        display: flex;
        flex-direction: column;
    }

    #div1 {
        background: red;
        flex-grow: 0.1;
    }

    #inner1 {
        height: 200px;
        background: lightcoral;
    }

    #div2 {
        background: blue;
        flex-grow: 0.9;
        overflow: auto;
    }

    #inner2 {
        height: 200px;
        background: #ccccff;
    }

    body {
        color: purple;
        background-color: #d8da3d
    }

Answer 1

You are misunderstanding flex-grow. It sets the flex grow factor,

which determines how much the flex item will grow relative to the rest of the flex items in the flex container when positive free space is distributed. When omitted, it is set to 1.

So only free space space is distributed. If you want that flex item to take up 10% of the flex container, you should set the flex-basis to 0:

the flex basis [is] the initial main size of the flex item, before free space is distributed.

Note you can use the shorthand flex property to set both flex-grow and flex-basis simultaneously (and flex-shrink too):

flex: 0.1; /*
  flex-grow: 0.1;
  flex-shrink: 1;
  flex-basis: 0;
*/

Also note that the Flexbox spec changed the initial value of min-height and min-width to auto (previously it was 0). This may break your percentages, so either use overflow different than visible, or set min-height: 0.

body {
  color: purple;
  background-color: #d8da3d
}
#container {
  height: 500px;
  display: flex;
  flex-direction: column;
}
#div1, #div2 {
  min-height: 0; /* Or `overflow: hidden` */
}
#div1 {
  background: red;
  flex: 0.1;
}
#inner1 {
  height: 200px;
  background: lightcoral;
}
#div2 {
  background: blue;
  flex: 0.9;
  overflow: auto;
}
#inner2 {
  height: 200px;
  background: #ccccff;
}

<div id="container">
  <div id="div1">
    <div id="inner1">Inner1</div>
  </div>
  <div id="div2">
    <div id="inner2">Inner2</div>
  </div>
</div>