CODEWITHSUNDEEP
htmlcssflexboxflex-grow
r3plica
r3plica

Reputation: 13367

flexbox flex grow and overflow

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.

  1. 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.

  1. Is there a way of forcing the top panel to overflow and get the bottom panels to fill the remaining height?

Upvotes: 1

Views: 10951

Answers (2)

r3plica
r3plica

Reputation: 13367

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.

Upvotes: 2

Oriol
Oriol

Reputation: 288100

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

Upvotes: 1

Related Questions