- From: Koen via GitHub <noreply@w3.org>
- Date: Mon, 09 Mar 2026 13:08:02 +0000
- To: public-css-archive@w3.org
Alright, how about this then? This unforunately only works in Chrome, but that's _something_ 😄
```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: -webkit-fill-available;
max-height: stretch;
padding: 0;
margin: 0 0 1rem;
box-sizing: border-box;
position: absolute;
position-anchor: --my-anchor;
left: anchor(left);
top: anchor(bottom);
bottom: auto;
position-try: --squish, --up, --squish-up;
background: tan;
overflow-y: auto;
}
@position-try --squish {
top: anchor(bottom);
bottom: 0;
height: 0;
height: -webkit-fill-available;
height: stretch;
}
@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;
height: -webkit-fill-available;
height: stretch;
}
</style>
```
Codepen: https://codepen.io/editor/vrugtehagel/pen/019cd278-26f9-76cb-82a1-408c809602f4
--
GitHub Notification of comment by vrugtehagel
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13617#issuecomment-4023649831 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 13:08:03 UTC