Possible easy fix for next/image responsive and flex sizing issues

[g-elwell]

Feature request

Is your feature request related to a problem? Please describe.

When the <Image> component is a child of a flex item, it doesn't respect the width of it's parent container and will overflow.

Example codesandbox here: https://codesandbox.io/s/nice-fog-t90y3?file=/pages/index.js

The image is set to have a width of 800px, and is inside a flex element with a width of 50%.

Note: the flex element does not have a specified width value, instead it is using the flexbox characteristics of:

flex-grow: 0
flex-shrink: 0
flex-basis: 50%

This should mean that the element takes up 50% of the available width of it's parent, but the <Image> component is causing it to stretch to 800px wide.

Describe the solution you'd like

The reason this is happening is because the outer wrapper generated by the <Image> component has the following properties:

max-width: 100%
width: 800px // the specified width of the image

This sets a specific pixel width on the container, which respects CSS width on the parent, but doesn't play nicely with flexbox.

By swapping this to:

width: 100%
max-width: 800px // the specified width of the image

You can achieve the same result, but avoid defining a set pixel width on the container. This will now respect the width of flex parents with the same end result.

Describe alternatives you've considered

Specifically setting width as a CSS property on the flex item will also solve the issue, but is more of a workaround than a real fix as the component should respect the width implied by flexbox.

Additional context

I don't think this change will introduce any negative side effects and should be very easy to implement.

I've noticed a few other issues raised regarding the sizing of the <Image> component and I think that this change will also go towards fixing those:

#18414
#18351

You can test this solution by using devtools to swap the inline max-width and width values on the outer container generated by the <Image> component.

[musjj]

Weirdly, this trick works on Firefox, but not on Chrome. It still overflows on Chrome. Do you have any idea why this is happening?