Re: [csswg-drafts] [css-anchor-position] Fairly common use-case seems pretty difficult (#13617)

Alright, last attempt! This one works in Chrome and Firefox, with one caveat; if the positioned element has been moved `--up`, and it hits the top of the screen, then it will flip back down if it has the space to do so instead of going `--squish-up`. But I think that might be fine? It _does_ use the `--squish-up` if it doesn't have the room to flip the whole thing back down.

<details>
  <summary>Toggle to see code</summary>

```html
<button id="anchor">Anchor</button>

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 <li>Item 4</li>
 <li>Item 5</li>
 <li>Item 6</li>
 <li>Item 7</li>
 <li>Item 8</li>
 <li>Item 9</li>
 <li>Item 10</li>
 <li>Item 11</li>
</ul>

<style>
#anchor {
 anchor-name: --my-anchor;
}
ul {
 list-style: none;
 display: flex;
 flex-direction: column;
 max-height: 10rem;
 min-height: 5rem;
 padding: 0;
 margin: 0 0 1rem;
 background: tan;
 position: absolute;
 position-anchor: --my-anchor;
 position-try: --squish, --up, --squish-up;
 top: anchor(bottom);
 left: anchor(left);
 overflow: auto;
}

@position-try --squish {
 top: anchor(bottom);
 bottom: 0;
}

@position-try --up {
 top: auto;
 bottom: anchor(top);
 margin: 1rem 0 0;
}

@position-try --squish-up {
 top: 0;
 bottom: anchor(top);
 margin: 1rem 0 0;
}
</style>
```

</details>

And the codepen: https://codepen.io/editor/vrugtehagel/pen/019cd2ec-1499-7c42-8d81-7c4a42c3d0fe

-- 
GitHub Notification of comment by vrugtehagel
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13617#issuecomment-4024074017 using your GitHub account


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

Received on Monday, 9 March 2026 14:11:45 UTC