Flex items in vertical flex container are treated as having definite size (for percent resolution on kids), in cases where they shouldn't

RESOLVED DUPLICATE of bug 1161771

Status

()

Core
Layout
RESOLVED DUPLICATE of bug 1161771
9 months ago
9 months ago

People

(Reporter: emilio, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

9 months ago
I just found a web page broken because of this.

Consider the following test-case:

<!DOCTYPE html>
<meta charset="utf-8">
<style>
html, body { margin: 0; padding: 0 }
.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>
<div class="wrapper">
  <div align="center">
    <img src="https://placehold.it/500x500" style="width: 50%; height: 50%;">
  </div>
</div>

Firefox treats the container of the <img> as having a definite size, and thus the image loses its aspect ratio.
(Reporter)

Comment 1

9 months ago
David, any chance for you to look at this and see if it's a dupe of something? I haven't tracked all the flexbox changes lately :)
Flags: needinfo?(dholbert)
Created attachment 8889499 [details]
testcase 1 (using text instead of an image)

Here's a simpler testcase with no aspect ratios involved -- just text.
(In reply to Emilio Cobos Álvarez [:emilio] from comment #0)
> Firefox treats the container of the <img> as having a definite size, and
> thus the image loses its aspect ratio.

In particular: we treat that flex item as having a definite *main size* (height, in this case) -- yeah.  And then we allow the percent height on the flex-grandchild to resolve against that height.

I don't think there's any spec support for this behavior, so I think it is a bug. Edge does match us (on the test code in comment 0 as well as my attached testcase), though, FWIW.  But I think that's likely because we both made the same mistake.
Flags: needinfo?(dholbert)
Summary: Flex container sizing divergence across browsers may cause webcompat problems. → Flex items in vertical flex container are treated as having definite size (for percent resolution on kids), in cases where they shouldn't
This is basically the same as bug 1092007 and bug 1161771, actually -- duping to the more recent one of those (with the more recent spec text).
Status: NEW → RESOLVED
Last Resolved: 9 months ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1161771
You need to log in before you can comment on or make changes to this bug.