Skip to content

[css-sizing] height: stretch on a float shouldn't ignore margins #11905

@Loirooriol

Description

@Loirooriol

Follow-up from #11044. https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing

Behaves as 100%, except it sizes the margin box regardless of the value of box-sizing.

If this is a block axis size, and the element is in a Block Layout formatting context, and the parent element does not have a block-start border or padding and is not an independent formatting context, treat the element’s block-start margin as zero for the purpose of calculating this size. Do the same for the block-end margin.

<!DOCTYPE html>
<div style="width: 100px; height: 100px; outline: solid magenta">
  <div style="float: left; width: stretch; height: stretch; background: cyan; margin: 25px"></div>
</div>
  • The float is participating in a BFC
  • The parent has no border nor padding
  • The parent doesn't establish an independent formatting context

Therefore, the spec implies the float should ignore margins and resolve height: stretch to 100px.

But of course that doesn't make sense, because the margins of a float don't collapse!

Blink has implemented the reasonable thing instead of the spec, I plan to do the same in Servo.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions