Menu icon Foundation
Flex column shrink max width issue

Hi,

 

So, I'm using the most up to date version of Foundation Sites. I'm only using the SASS mixins and not the predefined classes as we use strict BEM.

I've come across a problem with the flex-grid-column() mixin, specifically when using shrink as the column type (flex-grid-column(shrink)). The problem arises when I want to use a shrunken column, centered, on it's own but the width of the content within that column extends larger than the width of the screen. At this point the column doesn't reduce it's width but stays at the width of the content and creates a scrollbar.

I've noticed that adding max-width: 100% underneath the use of flex-grid-column() fixes the issue straight away and then noticed that if I used the non-mixin version (.shrink), it does this for me. See:

https://github.com/zurb/foundation-sites/blob/develop/scss/grid/_flex-grid.scss#L259

My question is, if I cannot use a shrunken column with flex grid via SASS mixins without adding the max width 100% fix, should it not be in the flex-grid-column() mixin by default? Rather than just in .shrink?

I may be using the flex shrink wrong, in which case, let me know. I'm also trying to have a shrunken left column and shrunken right column but as far as I'm aware, you can only align your columns to the left or right per row, rather than per column. :/

flex-gridshrinkgrid

Hi,

 

So, I'm using the most up to date version of Foundation Sites. I'm only using the SASS mixins and not the predefined classes as we use strict BEM.

I've come across a problem with the flex-grid-column() mixin, specifically when using shrink as the column type (flex-grid-column(shrink)). The problem arises when I want to use a shrunken column, centered, on it's own but the width of the content within that column extends larger than the width of the screen. At this point the column doesn't reduce it's width but stays at the width of the content and creates a scrollbar.

I've noticed that adding max-width: 100% underneath the use of flex-grid-column() fixes the issue straight away and then noticed that if I used the non-mixin version (.shrink), it does this for me. See:

https://github.com/zurb/foundation-sites/blob/develop/scss/grid/_flex-grid.scss#L259

My question is, if I cannot use a shrunken column with flex grid via SASS mixins without adding the max width 100% fix, should it not be in the flex-grid-column() mixin by default? Rather than just in .shrink?

I may be using the flex shrink wrong, in which case, let me know. I'm also trying to have a shrunken left column and shrunken right column but as far as I'm aware, you can only align your columns to the left or right per row, rather than per column. :/

Rafi Benkual over 3 years ago

That's right - It should be in the mixin as well. Is that something you can add as a PR on GitHub?

Flux over 3 years ago

Thanks Rafi.

Pull request: https://github.com/zurb/foundation-sites/pull/8902

CI errored but it looks to it just having a funny moment rather than a breaking code change. I'm aware how to re-run it manually so it's still tagged as broken (although it's not).

Also, on another subject, I've been trying to get in touch regarding costing for training and certification from Zurb for business. Who's the best person to get in touch with?

Rafi Benkual about 3 years ago

Awesome! Checking it out now - great work!