Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
Loirooriol opened this issue Mar 11, 2025 · 0 comments
Open

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

Loirooriol opened this issue Mar 11, 2025 · 0 comments
Labels
css-sizing-4

Comments

@Loirooriol
Copy link
Contributor

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-sizing-4
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Loirooriol