Setting image to > 75% width makes it break out of block boundary & causes horizontal scrolling

[maddisondesigns]

Describe the bug
I added a Group Block and set it to Full width. Within the Group Block, I added a Paragraph block and a Columns Block with 2 columns. In the Columns block I added a Paragraph block and an image block.

If I set the image width to greater than 75%, the image extends outside the block boundaries and causes horizontal scrolling.

Have tested on TwentyTwenty:
Vid - https://cl.ly/87c20a637044

TwentyNineteen:
Vid - https://cl.ly/fae20963cdfe

And multiple other themes. All had the same issue.

Regardless of whether you set the Group Block width to Wide, Full or nothing, the same issues occurs.

Here's a screenshot of an image in both columns, with the same issue occurring:

:

To reproduce
Steps to reproduce the behavior:

1. Add Group Block
2. Insert Columns block in Group Block
3. Add Paragraph Block with text to left column
4. Add image Block with a large image, to right column
5. Click on image and set width to 75% or 100%
6. See image expand past block boundaries.

Expected behavior
Content should never expand outside of block boundaries

Desktop (please complete the following information):

• OS: macOS Mojave 10.14.6
• Browser: Firefox Quantum 69.0.2
• Version: WP 5.3-beta2-46416

[CreativeDive]

#17685 could be a related issue.

[maddisondesigns]

This still breaks in WP 5.4 beta 3

[torounit]

This occurs even if the group block does not exist.

1. Add Columns block
2. Add large Image to column block using an image block. On the other side, insert some paragraph.
3. Set image size.

need to set an appropriate value for max-width.

tested on Gutenberg 8.6 RC

[paaljoachim]

I tested this with Gutenberg plugin version 15.8.1.
The issue is still valid.

[jordesign]

Closing this as a dupe of #12168 - and consolidating there.