High specificity breaks two column layout between mobile and large viewports

[scheinercc]

gutenberg/packages/block-library/src/columns/style.scss

Line 46 in 1eaad3c

flex-basis: calc(50% - 1em) !important;

Here I set the width of the image container on the left to 100px

Once I hit the above linked break point the 100px gets overwritten by 50% - 1em which does not work at all:

I get why !important is used here, but it makes it impossible to counter this in a sustainable way.

[stacimc]

Thanks for reporting this, @scheinercc. To give you some context, this behavior at mid-range viewports is currently necessary in order to avoid issues with column wrapping -- but adding the ability to customize column widths at different viewports is being very actively discussed.

You can check out this existing issue: #13363, where column behavior in particular is discussed. There's also #19909 along the same lines.

I'm going to close this issue as a duplicate, as it appears the linked issues cover this specific well.