Skip to content

[css-align] Clarify how justify-self affects automatic size of block-level box #12102

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
Open
Loirooriol opened this issue Apr 18, 2025 · 1 comment
Open

[css-align] Clarify how justify-self affects automatic size of block-level box #12102

Loirooriol opened this issue Apr 18, 2025 · 1 comment
Labels
Agenda+ css-align-3 Current Work

Comments

@Loirooriol
Copy link
Contributor

I'm quite puzzled by other implementers and even spec editors interpreting the spec in ways that seem weird to me, so let's clarify the behavior.

How does justify-self affect the automatic size of a block-level box?

I think https://drafts.csswg.org/css-align/#justify-self-property is clear:

Values other than stretch cause a width/height of auto to be treated as fit-content.

So the automatic size only stretches with justify-self: stretch (or auto/normal that behave as stretch).

As discussed in #11463, this behavior differs from <center> and align="". But it's consistent with flex items, grid items, and abspos, so I think it's the reasonable thing to do.

It's also how it works in Blink and Servo#36595 (AFAIK the only implementations).

However, @fantasai interpreted the spec as only using fit-content in over-constrained cases.

<!DOCTYPE html>
<div style="width: 200px; border: solid magenta">
  <div style="justify-self: right; border: solid">
    <div style="width: 100px; height: 50px"></div>
  </div>
</div>
<div style="width: 200px; border: solid magenta" align="right">
  <div style="border: solid">
    <div style="width: 100px; height: 50px"></div>
  </div>
</div>
Servo#36595, Blink

How do auto margins affect the above?

<!DOCTYPE html>
<div style="width: 200px; border: solid magenta">
  <div id="a" style="justify-self: right; border: solid">
    <div style="width: 100px; height: 50px"></div>
  </div>
  <div id="b" style="justify-self: right; border: solid; margin: auto">
    <div style="width: 100px; height: 50px"></div>
  </div>
</div>

In this example, both #a and #b should be sized as fit-content as per the above. Then, #b has auto margins, so it should appear centered instead of aligned to the right.

However, presumably because of

Note: auto margins, because they effectively adjust the size of the margin area, take precedence over justify-self.

Blink interprets that auto margins completely nullify justify-self: right, and thus #b stretches as for justify-self: normal.

I think that's very unexpected, my interpretation of the note is that margin: auto will center even with justify-self: right, but that it doesn't prevent justify-self: right from affecting the size.

Servo#36595 Blink
@Loirooriol Loirooriol mentioned this issue Apr 18, 2025
Open
@bfgeek
Copy link

bfgeek commented Apr 18, 2025

I'm fine w/ either behaviour.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Agenda+ css-align-3 Current Work
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@bfgeek @Loirooriol