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

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

== [css-anchor-position] Fairly common use-case seems pretty difficult ==
Sorry for the vague title. I don't know if anything needs to be done here, or if it's just a bunch of us not used to working with these new features.

I'm trying to do what feels like a fairly simple/common layout for a select picker: The picker is content size, up to a max-height, but will get smaller when it's close to the viewport edge, down to a min-height, then flip axes.

In more detail:

---

To **position the element**:

1. **Try and position the element** (see below).
2. If the height is less than some defined minimum, **try and position the element** but flip-block.
3. If the height is still less than some defined minimum, I dunno. I don't have strong feelings on what happens here.

To **try and position the element** (if flip-block, swap 'bottom' & 'top' in this algorithm):

1. Position the top of the element to the bottom of the anchor.
1. Give the element a height that's the smallest of these values:
   - Some defined maximum
   - The content height
   - The bottom of the anchor to the bottom of the viewport, minus some defined 'margin'.

--

This seems a likely pattern, but me, @bramus, and @dshin-moz struggled to make it work.

In the end I got it to work like this:

```html
<div class="picker-wrapper">
  <div class="picker">…options and such…</div>
</div>
```

```css
.picker-wrapper {
  position: fixed;
  position-area: bottom span-right;
  margin-bottom: 15px; /* some defined 'margin' */
  min-height: 100px; /* some defined minimum */
  position-try: flip-block;
  container-type: anchored;
}
.picker {
  overflow: auto;
  max-height: min(100%, 300px); /* 300px is some defined maximum */
  box-sizing: border-box;
  align-self: start;

  @container anchored(fallback: flip-block) {
    align-self: end;
  }
}
```

https://random-stuff.jakearchibald.com/anchor-position-puzzle/ - here's a demo (Chrome only, due to anchor containers)

Given that I actually found a solution, maybe there's nothing to solve here.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13617 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:22:46 UTC