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>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.
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-selfaffect the automatic size of a block-level box?I think https://drafts.csswg.org/css-align/#justify-self-property is clear:
So the automatic size only stretches with
justify-self: stretch(orauto/normalthat behave asstretch).As discussed in #11463, this behavior differs from
<center>andalign="". 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-contentin over-constrained cases.How do
automargins affect the above?In this example, both
#aand#bshould be sized asfit-contentas per the above. Then,#bhasautomargins, so it should appear centered instead of aligned to the right.However, presumably because of
Blink interprets that
automargins completely nullifyjustify-self: right, and thus#bstretches as forjustify-self: normal.I think that's very unexpected, my interpretation of the note is that
margin: autowill center even withjustify-self: right, but that it doesn't preventjustify-self: rightfrom affecting the size.