[csswg-drafts] [css-align] `align-content: baseline` is busted (#13421)

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

== [css-align] `align-content: baseline` is busted ==
I've been meaning to file this issue for a while, but finally got around to creating a testcase:

<details>
  <summary>Code</summary>

```
<!DOCTYPE html>
<style>
.container {
  margin: 10px;
  gap: 5px;
  border: solid 3px;
  height: 100px;
  width: max-content;
}
.container :is(div, td):nth-child(1) {
  font-size: 40px;
  align-self: baseline;
  background: lime;
  &::before {
    content: 'large text';
  }
}
.container :is(div, td):nth-child(2) {
  font-size: 12px;
  align-content: baseline;
  background: cyan;
  &::before {
    content: 'small text';
  }
}
.container :is(div, td):nth-child(3) {
  display: flex;
  font-size: 12px;
  align-content: baseline;
  background: orange;
  &::before {
    content: 'small text';
  }
}
.container :is(div, td):nth-child(4) {
  display: grid;
  font-size: 12px;
  align-content: baseline;
  background: cornflowerblue;
  &::before {
    content: 'small text';
  }
}

td {
  vertical-align: middle;
}
</style>
<div class="container" style="display: flex;">
  <div></div>
  <div></div>
  <div></div>
  <div></div>

</div>

<div class="container" style="display: grid; grid-auto-flow: column;">
  <div></div>
  <div></div>
  <div></div>
  <div></div>

</div>

<table class="container">
  <td style="align-content: baseline;"></td>
  <td></td>
</table>
```
</details>

https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=14481

- Parsing `align-content: baseline` / `align-content: last baseline`
  - Blink/Gecko/WebKit parses `align-content: baseline`
  - Gecko/WebKit parse `align-content: last baseline` (Blink explicitly didn't ship this as we knew is was broken, but WebKit appears to have shipped sometime in ~2022 https://webkit.org/blog/13591/webkit-features-in-safari-16-2/#:~:text=align%2Dcontent%3A%20last%20baseline ).
 - Fallback alignment (no baseline alignment context)
   - Gecko/WebKit only support the fallback alignment for `last baseline` if the container is `display: block` (from my testing).
 - Baseline alignment (testcase above, another item providing a baseline-context).
   - Blink/WebKit - not supported in `grid`/`flexbox`, supported in `table`.
   - Gecko - not supported in `flexbox`/`table`, very broken support in `grid` (there is hysterisis, and for the life of my cannot work out what Gecko is doing).

So options.

1. We do nothing. IMO this risks anyone actually trying to ship this feature properly. E.g. sites may have `align-content: last baseline` specified on things assuming it'll do nothing.
2. Everyone unships `align-content: baseline` / `align-content: last baseline`. Likely won't break anything due to the poor compat we have already, and move `align-content: baseline` to a later spec or similar or mark at-risk.
3. We specify that these features are broken, and just fallback to `start`/`end` alignment.

IMO this isn't a highly requested feature from web-developers (e.g. we haven't seen requests in our bug tracker to fix `align-content:  baseline`), but at the moment the status quo is particularly bad.

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


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

Received on Friday, 30 January 2026 19:56:34 UTC