1344525 - Flexbox computes wrong width for child with image in column layout

Status: UNCONFIRMED

(Core :: Layout, enhancement, P3)

Description

[voracity]

Attachment: Contains two corresponding examples, for column and row flexbox layout. dir:column has wrong widths, dir:row is correct everywhere.

When I create a column flexbox layout and include an image that is sized to have 100% of the height of its parent, it causes the parent's width to be set to the image's *natural* width, rather than its computed width.

So imagine we have the following (where img.png has natural dimensions 100x400):

<style>
.container { display: flex; width: 200px; height: 200px;
	align-items: center; flex-direction: column; }
.container > * { min-height: 0; }
.middle { flex: 1; }
img { max-height: 100%; display: block; }
</style>
<div class="container">
	<div class="first">First</div>
	<div class="middle"><img src="img.png"></div>
	<div class="last">Last</div>
</div>


Then .middle will be 100px wide (i.e. the natural width), rather than approx. 40px wide as it should be.

NOTE THAT the corresponding flex-direction: row; works correctly, so this isn't an (obvious) misunderstanding of how it should work.

I will attach two examples, one with column layout (which lays out incorrectly), and one with row layout (which lays out correctly).

Comment 1

[voracity]

Attachment: Screenshot of flex-direction: column layout

Comment 2

[voracity]

Attachment: Screenshot of flex-direction: row layout

This shows correct behaviour for row layouts. This example is identical, aside from rotation of the image and CSS properties.

Comment 3

[voracity]

One more point. (Apologies for the spam.) My experiments suggest the same holds for grid layouts too, but does *not* apply to display:table layouts or other layout techniques.

Comment 4

[voracity]

Perhaps someone could at least take a look at the screenshots to confirm this bug?

This seems like a serious layout bug to me, that affects both flex and grid, and it makes sense to nip it in the bud sooner rather than have bigger issues with fixing the behaviour in a few years time.

Comment 5

[Anton Stroganov]

+1

Comment 6

[Cole Peters]

Confirmed. Here's a live reproduction of the issue: https://codesandbox.io/s/lucid-margulis-3c7v8e?file=/index.html

Note that on Chrome, the div wrapping the image (indicated by a blue border) is sized to the computed width as expected. On Firefox (and Safari), the wrapping div takes up the intrinsic width of the image.

Comment 7

[Cole Peters]

Also, note that applying display: contents to the image's parent will result in the desired layout, but this will break scroll snapping behaviour (if applied) as well as other styles applied to the wrapper, which is not desirable.

Comment 8

[WhiteMind]

I want to know if this is a missing specification definition or a bug?
Since Safari also has this issue, I suspect it may be an undefined aspect in the specification.