flexbox flex grow and overflow

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?

Both look fine to me, the only difference is the height of the grey box. No content seems to be cut off? — Aaron, Jun 22 '15 at 14:03
@r3plica Please can you provide all the relevant code to reproduce your issue in the question. Currently, if the links go down or get changed this question will be of no use to other users experiencing a similar problem. A Stack Snippet of JS Fiddle would be very nice. :) — Hidden Hobbes, Jun 22 '15 at 14:10
@HiddenHobbes And this is what happened - both links are broken. — Szymon, Apr 18 '22 at 08:07

score 2 · Answer 1 · answered Jun 22 '15 at 16:02

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.

Oriol · Answer 2 · 2015-06-22T15:49:58.247

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;
}

flexbox flex grow and overflow

2 Answers2