Closed
Bug 932996
Opened 11 years ago
Closed 8 years ago
max-width:100% is not respected within auto-width inline blocks
Categories
(Core :: Layout: Block and Inline, defect, P4)
Tracking
()
RESOLVED
FIXED
mozilla47
People
(Reporter: nicolasgallagher, Unassigned)
References
Details
(Keywords: testcase, Whiteboard: [bugday-20131106])
Attachments
(2 files)
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•11 years ago
|
||
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.
Component: Untriaged → Layout: Block and Inline
OS: Mac OS X → All
Product: Firefox → Core
Whiteboard: [bugday-20131106]
Comment 2•11 years ago
|
||
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...
Depends on: 823483
Comment 3•11 years ago
|
||
Summary: max-width:100% is not respected within inline blocks → max-width:100% is not respected within auto-width inline blocks
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•8 years ago
|
||
fixed by bug 823483.
Status: UNCONFIRMED → RESOLVED
Closed: 8 years ago
Resolution: --- → FIXED
status-firefox45:
--- → affected
status-firefox46:
--- → fixed
status-firefox47:
--- → fixed
Target Milestone: --- → mozilla47
You need to log in
before you can comment on or make changes to this bug.
Description
•