Description
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
stretchcause awidth/heightofautoto be treated asfit-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:
automargins, because they effectively adjust the size of the margin area, take precedence overjustify-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 |
|---|---|
 |
 |