Min and max constraints should be able to prevent collapsing bottom margins #36321
Description
<!DOCTYPE html>
<div id="a" style="width: 100px; border: solid">
<div id="b" style="min-height: 100px">
<div id="c" style="height: 10px; margin-bottom: 90px"></div>
</div>
</div>| Servo, WebKit | Blink, Gecko |
|---|---|
I think Blink and Gecko are right. It doesn't make sense for #b to get the bottom margin from #c given that min-height: 100px prevents the margins from actually overlapping.
And from https://drafts.csswg.org/css2/#min-max-heights
- The tentative used height is calculated (without min-height and max-height) following the rules under "Calculating heights and margins" above.
- If this tentative height is greater than max-height, the rules above are applied again, but this time using the value of max-height as the computed value for height.
- If the resulting height is smaller than min-height, the rules above are applied again, but this time using the value of min-height as the computed value for height.
I think in CSS3 the above is no longer always true, but the testcase only uses CSS2 so therefore the behavior should behave like
<!DOCTYPE html>
<div id="a" style="width: 100px; border: solid">
<div id="b" style="height: 100px">
<div id="c" style="height: 10px; margin-bottom: 90px"></div>
</div>
</div>where now all browsers agree that there is no margin collapse because height: 100px doesn't behave as auto: