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. 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. 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. submitted by /u/HolidayChard9706 [link] [留言]