Description

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:

• 1st block is set to 300px Fixed width.
• 2nd block is set to 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.

Step-by-step reproduction instructions

1. Create a new page and paste the code snippet below in the block editor.
2. Publish and save the page.

Screenshots, screen recording, code snippet

<!-- 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 -->

Environment info

Installed WordPress version: 6.4.2
This issue occurred with and without the Gutenberg plugin installed.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes