The Goldilocks customizable select height

I recently gave a talk on customizable (as in fully-stylable) <select>, and as I was building demos I realised there's a sizing 'pattern' that's almost always the-one-you-want, but it took me a long time to figure out how to do it in CSS. Well, I say I figured it out. I actually failed, and asked a bunch of people for help, who (thankfully, for my ego) also struggled. Eventually, Ian Kilpatrick pointed me at the feature I was missing… TL;DR: If you just want the solution, skip to the end. Also, if you want a general introduction to customizable <select>, MDN has you covered. Default sizing Here's a mock-up of a custom select: Markup Languages HTML CSS XML SVG Markdown Scripting Languages JavaScript Python Ruby PHP Perl Lua Shell PowerShell Transpiled Languages TypeScript CoffeeScript Babel Elm ReasonML ReScript Haxe Dart Compiled Systems Languages C C++ C# Rust Go Zig D Vala JVM Languages Java Scala Kotlin Clojure Groovy Functional Languages Haskell OCaml F# Elixir PureScript Prolog…