Gutenberg: Images are oversized on the editor when the dimensions are bigger than the column width

[Gustavo-Hilario]

Quick summary

When creating columns with single images, the images are oversized on the editor whenever the image size is bigger than the column width.

Steps to reproduce

1. Create a new page or post.
2. Add the columns block. To make it easy to reproduce this issue, I'd suggest adding 3-5 columns.
3. Add an image to each of the columns. At this point, the images should be constrained within their respective column.
4. Change image dimensions settings. If the images are big enough, they will overflow the column in the Editor.

Screencast:

Screen.Capture.on.2022-10-11.at.15-36-10.mp4

What you expected to happen

I would expect the image dimensions setting to be linked to the width of the columns so it would not overflow the column if the size is less than 100%.

What actually happened

Large images are oversized and overlap other images and columns on the editor.

Context

Noticed this here: p9cu9o-3zX-p2. I also have seen that on other sites.

Platform (Simple, Atomic, or both?)

Simple, Atomic

Theme-specific issue?

I could reproduce this on several themes. It seems related to Gutenberg only.

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

No but the platform is still usable

Workaround details

No response

[jamiepalatnik]

📌 SCRUBBING : RESULT

• Tested on Simple - Replicated
• Tested on Self-hosted - Replicated
• Replicable on Core - Yes

📌 FINDINGS/SCREENSHOTS/VIDEO

• I am able to replicate this.
• I found several open issues in the Gutenberg repo that seem to be related. Will close this issue as a duplicate.

📌 ACTIONS

• Closed as duplicate of Image block content overflows boundaries inside editor WordPress/gutenberg#36789