Closed Bug 1244192 Opened 5 years ago Closed 5 years ago
"max-width: 100%" on a padded inline-block produces different sizing on its child, depending on whether child uses "max-width" or "width"
STR: 1. Load attached testcase (which includes 4 examples) 2. Look at the final example (labeled "max-width: 100% on parent and child") EXPECTED RESULTS: Red-bordered area should not overflow the black-bordered container. (i.e. the inline-block should end up with a border-box that's 100px wide) ACTUAL RESULTS: Orange overflows (i.e. the inline-block ends up with a border-box that's 100px + 40px of padding + 2px of border wide.) To be honest I'm not 100% sure what's correct here, but browsers are inconsistent. Details to follow.
Browsers seem to agree on the first, second, and third examples in the testcase. (Wide, wide, skinny) But the final example (max-width: 100% on parent and child) they disagree. * Firefox & IE11 render it as wide. * Chrome 49, Safari 9, and Edge render it as skinny. So we're the odd one out, among modern browsers, in our rendering of this testcase. So even if we're correct (again, not sure), we might be forced to align with the others for compat reasons. (which might be why Edge is different from IE11)
This inconsistency between browsers was the root cause of at least one webcompat issue -- see https://github.com/webcompat/web-bugs/issues/1160#issuecomment-176857421
Wondering if it's not something in the same family as Bug 823483
Fixed by bug 823483.
Status: NEW → RESOLVED
Closed: 5 years ago
Depends on: 823483
Resolution: --- → FIXED
Anthony, thanks do you have an example somewhere we could test?
You need to log in before you can comment on or make changes to this bug.