Last Comment Bug 932996 - max-width:100% is not respected within auto-width inline blocks
: max-width:100% is not respected within auto-width inline blocks
Status: RESOLVED FIXED
[bugday-20131106]
: testcase
Product: Core
Classification: Components
Component: Layout: Block and Inline (show other bugs)
: 25 Branch
: x86 All
P4 normal (vote)
: mozilla47
Assigned To: Nobody; OK to take it and work on it
:
: Jet Villegas (:jet)
Mentors:
: 1138406 (view as bug list)
Depends on: 823483
Blocks:
  Show dependency treegraph
 
Reported: 2013-10-30 14:13 PDT by Nicolas Gallagher
Modified: 2016-03-05 15:23 PST (History)
4 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---
affected
fixed
fixed


Attachments
Testcase (411 bytes, text/html)
2013-11-06 15:46 PST, Mats Palmgren (:mats)
no flags Details
workaround.htm (498 bytes, text/html)
2015-03-23 15:35 PDT, Francesco
no flags Details

Description User image Nicolas Gallagher 2013-10-30 14:13:31 PDT
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36

Steps to reproduce:

Image with 'max-width:100%' within an inline-block.

Test case:

http://codepen.io/anon/pen/BzLmv

Compare to Google Chrome.


Actual results:

Image does not respect max-width of ancestral context. It breaks out of the containing block element (gray box in test case).


Expected results:

It should not exceed 100% of the width of the ancestral context. It should be bound by the containing block element (gray box in test case).
Comment 1 User image [:Aleksej] 2013-11-06 11:56:16 PST
Confirmed with 2013-11-06-03-02-00-mozilla-central-firefox-28.0a1.en-US.linux-x86_64: 100% translates to the image's real width 300px.
Comment 2 User image Boris Zbarsky [:bz] (still a bit busy) 2013-11-06 12:35:33 PST
So the inline block has auto width, which means it shrink-wraps its kids.  But the width of the kids depends on the width of the inline-block because of the max-width style (which is a percentage of the width of the inline block, not of the gray 200px wide block, in this testcase).  The only way in which the 200px width enters the picture is that it's the available width for the shrink-to-fit algorithm.

So the real question here is what the "preferred minimum width" is in this case.  That's basically what the discussion in bug 823483 is about.

Note that the CSS specification does not actually define the rendering here, unfortunately, which is why different browsers handle it differently...
Comment 3 User image Mats Palmgren (:mats) 2013-11-06 15:46:02 PST
Created attachment 828326 [details]
Testcase
Comment 4 User image Boris Zbarsky [:bz] (still a bit busy) 2015-03-04 19:29:46 PST
*** Bug 1138406 has been marked as a duplicate of this bug. ***
Comment 5 User image Francesco 2015-03-23 15:35:27 PDT
Created attachment 8582024 [details]
workaround.htm

For me (Win7, FF 36) wrapping the image within an element styled like this
{
 display: table;
 table-layout: fixed;
 width: 100%;
}
fixes the issue.

See also bug 504622, bug 823483.
Comment 6 User image Karl Dubost :karlcow 2016-02-09 21:58:12 PST
fixed by bug 823483.

Note You need to log in before you can comment on or make changes to this bug.