[css-anchor-position] Fairly common use-case seems pretty difficult

[jakearchibald]

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.
2. 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:

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

.picker-wrapper {
  position: fixed;
  position-area: bottom span-right;
  margin-bottom: 15px; /* some defined 'margin' */
  min-height: 100px; /* some defined minimum */
  align-self: stretch;
  display: grid;
  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.

[jakearchibald]

It feels like the complexity in my solution comes from needing an extra wrapper to position the picker against the anchor when it's flip-block'd (and therefore needing a container query).

[bramus]

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:

.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:

Kapture.2026-03-09.at.10.39.04.mp4

(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:

.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():

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

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

[bramus]

I was trying out something else, but by the looks of it, the <select> seems to do this all by itself (in Chrome that is): https://codepen.io/bramus/pen/jEMMVrw/12f56be3bc91c4dd711bb4ffc8c9c343

I need to dig into the exact UA styles there to see how exactly it’s done.

One thing I did cheat with, is that I always added the 15px top and bottom margin. This margin should only be there at one end, depending on which row of the position-area-grid the positioned element is in … which is this issue: #13534

[jakearchibald]

Interesting! Although throwing in a max-height breaks it. max-height: min(300px, stretch) doesn't seem to work, but I don't know if it should.

That would solve it though.

One thing I did cheat with, is that I always added the 15px top and bottom margin.

eh I don't think that counts as a cheat.

[vrugtehagel]

This seems to work in Chrome and Firefox, although in Firefox it does suffer from the same issue @bramus mentions where if you "dip" it into the bottom edge and drag it back up before it flips-block then it stretches all the way to the bottom.

Toggle to see code

<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;
	position-area: bottom span-right;
	position-try: --squish, flip-block;
	background: tan;
	overflow-y: auto;
}
@position-try --squish {
	top: anchor(bottom);
	bottom: 0;
	height: -webkit-fill-available;
	height: stretch;
}
</style>

Codepen: https://codepen.io/editor/vrugtehagel/pen/019cd278-26f9-76cb-82a1-408c809602f4 (textarea added for its resizing capabilities 😉)

[jakearchibald]

@vrugtehagel not quite. That fails to shrink when it hits the top of the viewport.

[vrugtehagel]

Alright, how about this then? This unfortunately only works in Chrome, but that's something 😄

Toggle to see code

<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

[jakearchibald]

@vrugtehagel this doesn't limit the picker size to "some defined maximum". It seems to be a hard problem!

[vrugtehagel]

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.

Toggle to see code

<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>

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

[jakearchibald]

@vrugtehagel

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.

Then it fails one of the requirements 😁. It's close though, but very complicated. That isn't a criticism of you - it seems like there's something missing in the spec here. It shouldn't be this hard.

[bfgeek]

You can achieve the effect with calc-size()

Part of the issue is that with just min-height, height, and max-height can can't apply 3 minimums. With calc-size() you can.

E.g. adjusting @bramus demo:

.select {
	background: white;
	position: fixed;
	position-area: bottom span-right;
	border: 1px solid black;
	overflow: auto;
	min-height: 100px;
	max-height: calc-size(stretch, min(size, 150px));
	margin-bottom: 15px;
	position-try: flip-block;
}

Note I missed the arbitrary max-size, updated to reflect that. Slightly simpler now.

[vrugtehagel]

I think a neat(ish) solution to this problem would be if position-try was valid within a @position-try rule - that way, we could re-specify the order of preference for the different position states. In this specific case would could specify --squish-up as the first positioning attempt within @position --up, so that it would prefer squishing rather than flipping back down (its default preferred state).

[jakearchibald]

@bfgeek oh wow, yes! That's it! Amazing.

https://random-stuff.jakearchibald.com/anchor-position-puzzle/v2/

In one of my first attempts I'd tried min(fit-content, 100%), which obviously doesn't work, but I never thought to look at calc-size(). Nice!