1215103 - max-width in percent applied to an image in a flexible context is not proportional to its parent size, but its original size

Status: RESOLVED DUPLICATE of bug 823483

(Core :: Layout: Images, Video, and HTML Frames, defect)

Description

[tzi]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:41.0) Gecko/20100101 Firefox/41.0
Build ID: 20151001175956

Steps to reproduce:

 * Create a flexible box that should not grow ;
 * Add an image inside this flexible element ;
 * Aplly a `max-width` in percent to this image ;


Actual results:

The `max-width` is applied to the image with a value resolved proportionally to its original size.


Expected results:

The `max-width` value should be resolved proportionally to its container size.

Comment 1

[tzi]

Attachment: bug 1215103 testcase - max-width to image in flexible context.html

Comment 2

[tzi]

Attachment: Testcase screenshot on Firefox 43

Comment 3

[tzi]

Attachment: Testcase screenshot on Chrome 47

Comment 4

[tzi]

Attachment: Testcase screenshot on Edge 12

Comment 5

[tzi]

(In reply to tzi from comment #2)
> Created attachment 8674225 [details]
> Testcase screenshot on Firefox 47

Oups, it should be Firefox 43

Comment 6

[Julien Wajsberg [:julienw] (PTO -> may 13)]

Hey Daniel,

What do you think of this ?

Comment 7

[Boris Zbarsky [:bzbarsky]]

Duplicate of bug 823483, no?

Comment 8

[tzi]

:bz Yes it seem to be a duplicate.

I thought it was a flexbox bug.

Comment 9

[Daniel Holbert [:dholbert]]

Thanks for the triage, all - I was out camping.  Back now.

Yeah, this is effectively a dupe of bug 823483.  If you like, you can work around this by setting "min-width: 0" on the flex item (the parent of the <img>).  The behavior you're seeing here is from the image's contribution to the flex item's min-content width, which is what gets used (by default) as the minimum width for the flex item.  If you set "min-width:0" on the flex item, that disables this behavior.

Comment 10

[tzi]

After reflection, they are probably two bugs:

 * The image should shrink (Duplicate of #823483)
 * The flex item should not grow (No found a duplicate)

Because, even without the `max-width: 100%` declaration, a big image should not enlarge its flex container if it has a `flex-grow` to 0.

Am I right?

Cheers,
Thomas.

Comment 11

[Daniel Holbert [:dholbert]]

(In reply to tzi from comment #10)
>  * The image should shrink (Duplicate of #823483)
>  * The flex item should not grow (No found a duplicate)
[...]
> Because, even without the `max-width: 100%` declaration, a big image should
> not enlarge its flex container if it has a `flex-grow` to 0.

I think we're doing the right thing there, actually.

Flex items have this special behavior where they refuse to be smaller than their min-content size (the size of their contents if all line-wrapping opportunities are taken), by default.  See https://drafts.csswg.org/css-flexbox-1/#min-size-auto for more.

So, the flex item growing (to its min-content width) is correct.  So the core issue here is whether the image's "max-width:100%" influences its parent's min-content width. (bug 823483)

Having said that -- it looks like Chrome disagrees with us on the flex items' sizing, if I tweak the testcase to remove the "max-width:100%" styling. Preserving needinfo=me to look into that further & file a Chrome bug or correct myself if appropriate.

Comment 12

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #11)
> Flex items have this special behavior where they refuse to be smaller than
> their min-content size

(This is what I was getting at with "min-width:0" in comment 9, BTW. If you *don't want* the image (or other contents) to grow the flex item beyond its flex-basis in your testcase, you can use add "min-width: 0" to the flex item, to disable the special flex-item min-sizing behavior.)

Comment 13

[Daniel Holbert [:dholbert]]

Attachment: testcase to demonstrate flex item sizing (w/out "max-width: 100%" on img, & w/ border on flex item)

Here's a testcase without "max-width" on the image. Firefox Nightly & Edge 12 agree that the flex item grows (for reasons explained above). Chrome disagrees; its flex-item-border does not extend to fit the whole image.

I'm pretty sure that's a chrome bug w/ "min-width:0" handling.

Comment 14

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #13)
> I'm pretty sure that's a chrome bug w/ "min-width:0" handling.

(Sorry, I meant "min-width: auto", not "min-width:0".)

Comment 15

[Daniel Holbert [:dholbert]]

Chrome disagrees on the testcase I just attached because it incorrectly makes "flex-basis" disable "min-width:auto". I filed https://code.google.com/p/chromium/issues/detail?id=546034 on that.

Comment 16

[tzi]

Thanks for the explanations, the solution and the chrome report!