diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 8bda0902630372..c89a7871fdc0ba 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -337,9 +337,8 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { $child_layout_styles[] = array( 'selector' => ".$container_content_class", 'declarations' => array( - 'flex-shrink' => '0', - 'flex-basis' => $block['attrs']['style']['layout']['flexSize'], - 'box-sizing' => 'border-box', + 'flex-basis' => $block['attrs']['style']['layout']['flexSize'], + 'box-sizing' => 'border-box', ), ); } elseif ( 'fill' === $block['attrs']['style']['layout']['selfStretch'] ) { diff --git a/packages/block-editor/src/hooks/child-layout.js b/packages/block-editor/src/hooks/child-layout.js index 89e5c345085a8b..20de7d06a2f64d 100644 --- a/packages/block-editor/src/hooks/child-layout.js +++ b/packages/block-editor/src/hooks/child-layout.js @@ -7,6 +7,7 @@ import { __experimentalUnitControl as UnitControl, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +import { useEffect } from '@wordpress/element'; /** * Internal dependencies @@ -43,6 +44,20 @@ export function ChildLayoutEdit( { const { layout: childLayout = {} } = style; const { selfStretch, flexSize } = childLayout; + useEffect( () => { + if ( selfStretch === 'fixed' && ! flexSize ) { + setAttributes( { + style: { + ...style, + layout: { + ...childLayout, + selfStretch: 'fit', + }, + }, + } ); + } + }, [] ); + return ( <>