---
title: "The Goldilocks customizable select height"
url: https://daily.dev/posts/the-goldilocks-customizable-select-height-yfspphtgb
source_url: https://jakearchibald.com/2026/goldilocks-select-height
type: article
source: "Jake Archibald"
published: 2026-06-29T15:05:18.087Z
updated: 2026-06-29T15:05:39.728Z
tags: ["css"]
reading_time: 8
upvotes: 7
comments: 2
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# The Goldilocks customizable select height

**[Jake Archibald](https://daily.dev/sources/jakearchibald)** · 8 min read · 7 upvotes · 2 comments

## Summary

A deep dive into CSS sizing patterns for the upcoming customizable `<select>` picker element. The post walks through how to set a 'Goldilocks' height — not too small, not too large — using CSS anchor positioning, `calc-size()`, `stretch`, and `flip-block` fallbacks. It covers cross-browser quirks in Chrome, Firefox, and Safari, providing progressive enhancement strategies using `@supports` and fallback hacks for browsers that don't yet support `calc-size()`. The final copy-pasteable CSS snippet handles viewport margins, minimum height (using `calc-size(fit-content, min(size, ...))`) and maximum height simultaneously.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://jakearchibald.com/2026/goldilocks-select-height>

## Community discussion

Top comments from developers on daily.dev.

**@lewisla** · 0 upvotes

> gold dust 🪎

**@agustinbarrientos** · 0 upvotes

> `calc-size(fit-content, min(size, 12em))` is ridiculous CSS, but it finally says exactly what the picker needs.

## Similar posts on daily.dev

- [Issue \#748: The select element, sized just right — Frontend Focus](https://daily.dev/posts/issue-748-the-select-element-sized-just-right-frontend-focus-qauqwjye1) · Frontend Focus · 2 upvotes · 0 comments
- [Abusing Customizable Selects](https://daily.dev/posts/abusing-customizable-selects-hyfhou2vz) · CSS-Tricks · 14 upvotes · 1 comments
- [Nice Select · February 3, 2026](https://daily.dev/posts/nice-select-february-3-2026-d8jdnzuo9) · Adam Argyle · 3 upvotes · 0 comments

---

Tags: [#css](https://daily.dev/tags/css)

[View this post on daily.dev](https://daily.dev/posts/the-goldilocks-customizable-select-height-yfspphtgb)