flexbox flex grow and overflow - html

Question

I have created a site that uses flexboxes and it is working in most parts, but I have come across an issue with something.
http://kudos.topspindigital.com/#/table-tennis
If you look at the page, the top right panel is cutting off text. This is because the panels below are set to be 1.5 x the height of the one above.
This works fine for this page:
http://kudos.topspindigital.com/#/archery
but as you can see, anything that has 2 lines of text for the header brings the content down.
So my question is 2 things.
Is there a way I can tell my panels to grow to 1.5 x height of the top but allow the top to expand (and let the children shrink).
I tried doing this:
.flex-double {
flex-grow: 1.5;
flex-shrink: 1;
flex-basis: 0;
}
but it had no effect.
Is there a way of forcing the top panel to overflow and get the bottom panels to fill the remaining height?

Answer 1

ok, so I was having problems with this, so I made a codepen with my CSS and tried to solve the issue myself.
Here is the codepen:
http://codepen.io/r3plica/pen/qdPeYp
I have managed to fix the issue by creating a new class called .flex-auto which replaced .flex-double.
It looks like this:
.flex-auto {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
Applying this to the item I want to be just enough height (in this case the top panel) will set it to the correct height and the second panel will then take up the rest of the space.

Answer 2

Yes. Just set your desired flex factor:
flex: 1.5;
And then the Flexbox module changed the initial value of min-height:
4.5 Implied Minimum Size of Flex Items
To provide a more reasonable default minimum size for flex items,
this specification introduces a new auto value as the initial
value of the min-width and min-height properties defined in
CSS 2.1.
So the min-height will compute to the content size, which is exactly what you want.
You can see this behavior on Firefox, but Chrome hasn't implemented it yet.
If you want it to overflow, just unset the min-height and add overflow to the appropriate element:
.row {
min-height: 0;
}
.panel-gray {
overflow: auto;
}