Using both an offset and column size causes unexpected width.

[kybishop]

Applying an offset class to a box with any given column size causes the box's width to shrink. I can't seem to find any documentation on this CSS behavior, but it appears consistent over both Chrome and Safari.

Switching to width over max-width fixes this issue, though I'm guessing there might be a particular reason max-width is being used?

[runspired]

@kybishop it depends on the flex-direction and is related to flex-basis bugs which I'm also looking into fixing (I have a solution in mind).

[kybishop]

From my investigations:

This is a bug in Chrome/Safari related to flex-direction: column.

The bug boils down to inconsistencies between how percentage-based max-width and width properties determine the width of an element when flex-direction is set to column

Width calculations on Chrome and Safari when flex-direction: column:

• with max-width as a percentage: (parentWidth - childMargins) * max-width.
• with width as a percentage: parentWidth * width

Firefox [correctly] ignores margins in both cases

Solutions

~1. We do the same as Bootstrap and use width to determine column sizes. - This is a foolproof approach consistent among all browsers. This gets us a fix right away - One could argue this is more "correct". Should a column ever be expected to shrink? If not, width is more appropriate. - If the goal is to ease people from Bootstrap to Flexi, it might be advantageous to implement grids in a similar way. Using width provides a more consistent drop-in solution. - CON: This is a breaking change for people relying on the old column behavior~ EDIT: It turns out bootstrap isn't using flexbox, and this fix doesn't actually apply. 2. Hope Chrome/Safari can fix the bug in a timely manner. Bug report here.

[kybishop]

This bug unfortunately remains. PR #99 breaks wrapping; wrapped flex children take up the entire row. Will be opening a PR to revert #99.

EDIT: reverted in #108

[RobbieTheWagner]

@runspired could you elaborate on the solution you had in mind or should we just wait for browsers to fix themselves to support this?

[kybishop]

Here is an example of the row-wrapping bug: http://codepen.io/kybishop/pen/NdBMpE

Change max-width to width on the .half class and note how the third box takes up the entire row. This unfortunately means we must use max-width, which makes the offset bug persist thanks to the bug in various browsers.

Thankfully the browser fixes are slowly being rolled out. Chrome v56 contains a bugfix, and has already been in the wild for about a month. Safari, sadly, has yet to respond to their bug report https://bugs.webkit.org/show_bug.cgi?id=166061