1910290 - Flex item containing an image is too large on the cross axis with flex-direction: column & max-height

Status: RESOLVED DUPLICATE of bug 1926015

(Core :: Layout: Flexbox, defect)

Description

[wall]

Attachment: firefox.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:129.0) Gecko/20100101 Firefox/129.0

Steps to reproduce:

Open the following example:

<style>
  .outer {
    border: 2px solid red;
    padding: 2px;
    width: 800px;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .inner {
    max-height: 100%;
    background: green;
  }

  img {
    max-height: 100%;
  }
</style>

<div class="outer">
  <div class="inner">
    <img src="https://picsum.photos/id/237/600/600" />
  </div>
</div>

Actual results:

In Firefox, the .inner div grows to 600px on the cross axis (width).

Firefox does not show this issue in the following cases:

• changing max-height to height
• changing the flex direction to row (flip width and height on the outer div & change max-height to max-width)

Expected results:

Chrome and Safari limit the inner div to the actual maximum width of the image (300px in this case).

Comment 1

[wall]

Attachment: chrome.png

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Flexbox' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 3

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

Attachment: Bug 1910290 Part 1 - Clean up for various frame classes. r?#layout

• Replace 'Width' with 'ISize'.
• Drop virtual on methods already with 'override'.
• Define AddInlineMinISize() and AddInlinePrefISize directly in
  nsContinuingTextFrame.

Comment 4

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

Attachment: Bug 1910290 Part 2 - Drop unnecessary nsIFrame:: for InlineMinISizeData and InlinePrefISizeData usages. r?#layout

Comment 5

[Phabricator Automation]

Comment on attachment 9417186 [details]
Bug 1910290 Part 1 - Clean up for various frame classes. r?#layout

Revision D218282 was moved to bug 1911027. Setting attachment 9417186 [details] to obsolete.

Comment 6

[Phabricator Automation]

Comment on attachment 9417187 [details]
Bug 1910290 Part 2 - Drop unnecessary nsIFrame:: for InlineMinISizeData and InlinePrefISizeData usages. r?#layout

Revision D218283 was moved to bug 1911027. Setting attachment 9417187 [details] to obsolete.

Comment 7

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

Attachment: Testcase 1 (from comment 0)

Comment 8

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

I didn't mean to take this. I wrongly attached my patches to this bug.

However, I'm currently working on bug 1909761, and I think it might fix the testcase here.

Comment 9

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

Tested in Firefox 132.0a1 (2024-09-03). Testcase 1 in comment 7 now looks fine.

Comment 10

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

The testcase was accidentally fixed in bug 1909761. Later, I proposed a new approach in bug 1918576. Unfortunately, the solution causes a performance regression reported in bug 1920084. Due to time constraint, I decided to revert the solution and reopen this bug. We can continue to develop a solution here.

Comment 11

[Daniel Holbert [:dholbert]]

From some brief testing, I think the attached testcase is fixed (matches Chrome's rendering) in latest Nightly and can perhaps be closed as a dupe of bug 1926015 -- TYLin, could you confirm?

Comment 12

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

Yes, this bug is fixed by 1926015. I test it on Nightly 134.0a1 (2024-11-22).

The testcase has been captures as a wpt in https://wpt.fyi/results/css/css-sizing/intrinsic-percent-replaced-017.html.