[csswg-drafts] [css-align] `justify-items: legacy` fails to fulfil its only purpose of explaining `<center>` and `align` (#11463)

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

== [css-align] `justify-items: legacy` fails to fulfil its only purpose of explaining `<center>` and `align` ==
https://drafts.csswg.org/css-align/#valdef-justify-items-legacy

> This keyword causes the value to effectively inherit into descendants.
> 
> If the [legacy](https://drafts.csswg.org/css-align/#valdef-justify-items-legacy) keyword appears on its own (without an accompanying [left](https://drafts.csswg.org/css-align/#valdef-justify-content-left), [right](https://drafts.csswg.org/css-align/#valdef-justify-content-right), or [center](https://drafts.csswg.org/css-align/#valdef-self-position-center) keyword): if the [inherited value](https://drafts.csswg.org/css-cascade-5/#inherited-value) of justify-items includes the legacy keyword, this value computes to the inherited value; otherwise it computes to normal.
> 
> When justify-self:auto references the value of [justify-items](https://drafts.csswg.org/css-align/#propdef-justify-items), only the alignment keyword, not the [legacy](https://drafts.csswg.org/css-align/#valdef-justify-items-legacy) keyword, is referenced by it. **It exists to implement the legacy alignment behavior of HTML’s `<center>` element and `align` attribute.**

Well, it fails to fulfill its only purpose, because `<center>` and `align` allow automatic sizes to stretch.

https://drafts.csswg.org/css-align/#justify-self-property

> 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).

```html
<!DOCTYPE html>
<div align="center">
  <div style="border: solid">foo</div>
</div>
<div style="justify-items: legacy center">
  <div style="border: solid">foo</div>
</div>
```

In Blink:

![](https://github.com/user-attachments/assets/fefc81f8-90e4-4d80-9bb7-a2bbd6e33a4b)


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


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

Received on Thursday, 9 January 2025 00:03:53 UTC