- From: Koen via GitHub <noreply@w3.org>
- Date: Mon, 09 Mar 2026 12:03:51 +0000
- To: public-css-archive@w3.org
This seems to only work in Chrome, but perhaps still a useful addition to the conversation:
```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;
min-height: 5rem;
max-height: stretch;
padding: 0;
margin: 0 0 1rem;
box-sizing: border-box;
position: absolute;
position-anchor: --my-anchor;
position-area: bottom span-right;
position-try: --squish, flip-block;
background: tan;
overflow-y: auto;
}
@position-try --squish {
top: anchor(bottom);
bottom: 0;
height: stretch;
}
</style>
```
Codepen: https://codepen.io/editor/vrugtehagel/pen/019cd278-26f9-76cb-82a1-408c809602f4 (textarea added for its resizing capabilities 😉)
--
GitHub Notification of comment by vrugtehagel
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13617#issuecomment-4023275003 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 12:03:52 UTC