The issue requires adding a single CSS property to fix flexbox layout behavior.
The problem is that blocks with fixed width in a Row layout shrink when adjacent blocks have long content. The solution is to add `flex-shrink: 0` to fixed-width blocks. No major blockers exist as the fix is localized to CSS generation.
When grouping 2 or more blocks into a Row block (horizontal flex layout), we can set the child blocks' width into 3 modes: Fit, Fill, and Fixed.
This issue occurred when the Row block has 2 child blocks:
Fixed width.Fit or Fill, but the content inside this block is long so that it wraps into multiple lines.This will cause the 1st block to shrink and not obey the 300px Fixed width setting. See the screenshot below:
This happens because the generated CSS for the 1st block with Fixed width setting is only flex-basis: 300px.
Additional CSS flex-shrink: 0 is required to ensure the 1st block doesn't shrink.
<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"layout":{"selfStretch":"fixed","flexSize":"300px"}},"backgroundColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-background-color has-background">This block is set to 300px Fixed width.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"layout":{"selfStretch":"fill","flexSize":null}},"backgroundColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-background-color has-background">We have another block with very long content so that it wraps to the next line. And this will cause the first block to shrink and doesn't obey the 300px fixed width setting.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
Installed WordPress version: 6.4.2 This issue occurred with and without the Gutenberg plugin installed.
Claim this issue to let others know you're working on it. You'll earn 10 points when you complete it!