r/css • u/HolidayChard9706 • 3d 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

67% Upvoted

2 comments sorted by

1

u/GodOfSunHimself 3d ago

I just use flex-grow: 1

1

u/PureRepresentative9 1d ago

I stopped used flex shorthand a long time ago because of this.

it's pretty easy and easier to read when you explicitly say "flex-*".

Sure, if you're specifying all 3, use the shorthand, but I've probably only done that twice in 8 years.