Fix auto-size patterns triggering scrollbar flickering on certain size (

#52921)

* Fix auto-size patterns triggering scrollbar flickering

* Move width style to css

* Prevent infinity aspectRatio value

---------

Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>

packages/block-editor/src/components/block-preview/auto.js

@@ -58,12 +58,19 @@ function ScaledBlockPreview( {
 	MemoizedBlockList = MemoizedBlockList || pure( BlockList );
 
 	const scale = containerWidth / viewportWidth;
+	const aspectRatio = contentHeight
+		? containerWidth / ( contentHeight * scale )
+		: 0;
 	return (
 		<Disabled
 			className="block-editor-block-preview__content"
 			style={ {
 				transform: `scale(${ scale })`,
-				height: contentHeight * scale,
+				// Using width + aspect-ratio instead of height here triggers browsers' native
+				// handling of scrollbar's visibility. It prevents the flickering issue seen
+				// in https://github.com/WordPress/gutenberg/issues/52027.
+				// See https://github.com/WordPress/gutenberg/pull/52921 for more info.
+				aspectRatio,
 				maxHeight:
 					contentHeight > MAX_HEIGHT ? MAX_HEIGHT * scale : undefined,
 				minHeight,

packages/block-editor/src/components/block-preview/style.scss

@@ -11,8 +11,9 @@
 	overflow: hidden;
 
 	.block-editor-block-preview__content {
-		// This element receives inline styles for width, height, and transform-scale.
+		// This element receives inline styles for transform-scale and aspect-ratio.
 		// Those inline styles are calculated to fit a perfect thumbnail.
+		width: 100%;
 
 		// Vertical alignment. It works with the transform: translate(-50%, -50%)`,
 		top: 0;