Open Bug 1344525 Opened 4 years ago Updated 3 years ago

Flexbox computes wrong width for child with image in column layout

Categories

(Core :: Layout, enhancement, P3)

enhancement

Tracking

()

UNCONFIRMED

People

(Reporter: subs, Unassigned)

Details

Attachments

(3 files)

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).
This shows correct behaviour for row layouts. This example is identical, aside from rotation of the image and CSS properties.
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.
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.
+1
Priority: -- → P3
You need to log in before you can comment on or make changes to this bug.