Columns Block: Custom column widths can wrap prematurely

[laurelfulford]

Describe the bug
When using custom widths for the columns block (even the preset ones), the columns seem to wrap at odd point (or at least different points than they do when using the default widths). This looks like it's due to the fact the inline styles don't factor in the margin size to the flex-basis value -- the values are straight percentages like flex-basis: 66.66% inline, but in the stylesheet, the default is flex-basis: calc(50% - 16px).

I could recreate this in Gutenberg 6.3 and 6.4.

This might be resolved in part by #13363, but I figured it might be worth raising separately.

To reproduce
Steps to reproduce the behavior:

1. Add a column block, and pick the option where the two columns are the same width.
2. Add a second column block, and pick the option where one column is 33%, and the other 66%.
3. Add some simple text content to each, to better tell how wide they are.
4. Save and publish.
5. Scale down the browser window; at one point, before the first column block will wrap, the second one will wrap, leaving a space on the left.

Expected behavior
The custom widths columns will wrap at the same breakpoints as the default column widths.

Screenshots
The two column blocks examples:

The 'odd' wrapping breakpoint (happens between 767px and 601px wide):

And when I manually edit the inline styles to subtract the 16px with calc( XX% - 16px):

Desktop (please complete the following information):

• OS: Mac OS 10.14.6
• Browser: Firefox, version 68.0.2
• & Browser: Chrome, version 76.0.3809.132

[chthonic-ds]

I've just hit this while trying to write custom styles for one-/two-third columns. I'm unsure how to override the inline flex-basis rule because there seems to be no class on the container element identifying how many columns it contains.

#15663 (comment) implies there used to be a class like has-2-columns applied to the container?

[youknowriad]

@aduth Any thoughts here, is this solved by the new way the widths work?

[aduth]

I believe this is a duplicate of #18416 (or rather, the inverse, since this one was created first).

It was discussed as part of the recent columns revisions in #20169, but a fix was not included, since they were not directly related.

Specifically, my comment at #20169 (comment) expands and include possible solution steps:

That being said, as seen with #18416, the mid-range viewport styling still has issues that should be resolved. I don't personally see them as within the scope of what I intend to address here, so I would not suggest to include them. But in consideration of those issues, I see that we should separately consider:

• It might be worth eliminating the two-column layout, and have only the single-column and horizontal ("original") layouts for columns for small and larger viewports respectively
• Otherwise: @ZebulanStanphill 's suggestion in Column wrapping is broken between 599px and 782px #18416 to use !important to force the two-columns of the flex-basis is probably valid, and still valid after these changes
  • Perhaps made complicated by the fact that it must only take effect between small-medium so that large viewport flex-basis styling default can take effect without !important. It would probably need to be made as a custom media query, not using existing mixins.

It's something that's existed previously, but I was still hopeful to be able to include a fix in time for WordPress 5.4.

[youknowriad]

Thanks @aduth, let's close this then since the other one has more context.

[aduth]

Duplicate of #18416