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:
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. :/