flex: 1 and flex: 1 1 auto are not interchangeable when the parent has no definite height

Short version, so you do not have to click: flex: 1 expands to flex: 1 1 0%. That 0% is a percentage basis and resolves against the parent's height. A panel that is height: auto under a max-height cap has no definite height, so the percentage has nothing to resolve against and the child contributes zero.

flex: 1 1 auto fixes it, because the basis becomes the content's own height.

Why it took an evening

The reason it took me an evening: Chromium quietly does what you meant, and the engine that broke it was WKWebView. Every test was green because Playwright ships its own WebKit build rather than the system one.

Open question

I have not worked out whether the spec requires that collapse or merely permits it, so I cannot say which engine is wrong. If you know which reading applies to a max-height-capped auto-height parent, I would like to hear it.