[csswg-drafts] [css-align] Clarify how `justify-self` affects automatic size of block-level box (#12102)

Loirooriol has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-align] Clarify how `justify-self` affects automatic size of block-level box ==
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`](https://drafts.csswg.org/css-align/#valdef-justify-self-stretch) cause a [`width`](https://drafts.csswg.org/css-sizing-3/#propdef-width)/[`height`](https://drafts.csswg.org/css-sizing-3/#propdef-height) of [`auto`](https://drafts.csswg.org/css-sizing-3/#valdef-width-auto) to be treated as [`fit-content`](https://drafts.csswg.org/css-sizing-4/#valdef-width-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](https://github.com/servo/servo/pull/36595) (AFAIK the only implementations).

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

```html
<!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](https://github.com/servo/servo/pull/36595), Blink |
| - |
| ![](https://github.com/user-attachments/assets/9da8284e-6e98-47d1-8cfe-134153a40067) |

### How do `auto` margins affect the above?

```html
<!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`](https://drafts.csswg.org/css-align/#propdef-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](https://github.com/servo/servo/pull/36595) | Blink |
| - | - |
| ![](https://github.com/user-attachments/assets/ef0ddd5b-f147-41b6-8e5b-1c6d58348c4d) | ![](https://github.com/user-attachments/assets/1a5f0d9e-47cd-4d4d-bfe7-ff3dbba42fe3) |








Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12102 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 18 April 2025 22:56:36 UTC