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

I found a solution that does not rely on the anchored query. It’s using a custom `<position-try-fallback>` that insets the IMCB by 15px from the bottom.

Live demo: https://codepen.io/bramus/pen/pvEEbVX/bb0b8701e1a7076f861e5dd39caacabb?editors=0110

The CSS:

```css
.select {
 position: fixed;
 position-area: bottom span-right;
 position-try: --custom, flip-block;
 align-self: normal;

 overflow: auto;
 min-height: 100px;
}

@position-try --custom {
 inset: 0 0 15px 0;
 align-self: stretch;
 max-height: fit-content;
}
```

Recording:

https://github.com/user-attachments/assets/00b5bebd-ccab-4355-9c9c-86357b3423b0

(The code doesn’t work in Firefox Nightly though. It does not seem to respect the `max-height: fit-content;`. You can see this by dragging the anchor down so that it uses the `--custom` fallback and then dragging anchor back up.

---

Tinkering with this a bit further, I tried to create a version that does the same on the top as well. For this I created more fallbacks with different insets

Live demo: https://codepen.io/bramus/pen/PwGGzMx/225698a3a21f99d4bade914fb3155a81

The CSS: 

```css
.select {
 …
 min-height: 100px;
 max-height: fit-content;
 …
 position-try: --custom-btm, --normal-top, --custom-top, --normal-btm;
}

@position-try --normal-btm {
 position-area: bottom span-right;
 align-self: normal;
}

@position-try --custom-btm {
 position-area: bottom span-right;
 inset: 0 0 15px 0;
 align-self: stretch;
}

@position-try --normal-top {
 position-area: top span-right;
 align-self: normal;
}

@position-try --custom-top {
 position-area: top span-right;
 inset: 15px 0 0 0;
 align-self: stretch;
}
```

Now this one doesn’t work, regardless of how you arrange the `<position-try-fallback>`s in the `position-try` property. Depending on whether the positioned element is already at the top or bottom, you want different orders to try out.

---

All the above combined, it looks like that when evaluating the list of `position-try-fallbacks`, it does that by using the _current_ size of the positioned element instead of the minimum size. Perhaps this needs to be adjusted so that it can play nice with auto-{height|width}s + a `min-{height|width}`?

For this example here, it would be: _“As long as there is 100px available in the IMCB, this `position-area` is OK”_

That would also allow anchoring it using `anchor()`:

```css
.select {
 …
 min-height: 100px;
 height: fit-content;
 margin-bottom: 15px;
}

@position-try --custom {
 top: anchor(bottom);
 left: anchor(left);
}
```

-- 
GitHub Notification of comment by bramus
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13617#issuecomment-4022569752 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 09:59:31 UTC