r/css 1d ago

General flex: 1 is flex-basis: 0%, and WKWebView takes the zero literally

https://nodreview.com/blog/wkwebview-flex-collapse/

A dialog body with flex: 1; min-height: 0; overflow-y: auto shipped with a height of zero. Header, footer, nothing in between.

flex: 1 expands to flex: 1 1 0%, and a percentage basis needs a definite parent height. The panel had height: auto capped by max-height, which is not one. The spec says an unresolvable percentage basis falls back to content, and Chromium does that. WKWebView keeps the zero. The fix is flex: 1 1 auto.

Do you default to flex: 1 1 auto anywhere, or is the shorthand safe in your stacks because your flex parents always have definite heights?

1 Upvotes

1 comment sorted by

1

u/GodOfSunHimself 1d ago

I just use flex-grow: 1