3 ms·

Plenty of stuff is still pretty unintuitive in CSS (why do I set `min-width: 0` to stop a flex/grid item overflowing? That doesn't make a lick of sense) but it'

Plenty of stuff is still pretty unintuitive in CSS (why do I set `min-width: 0` to stop a flex/grid item overflowing? That doesn't make a lick of sense) but it's in a pretty good place these days. Flex and grid make the majority of responsive layouts a breeze and the some of the new filter stuff is super powerful, just a shame it took 20+ years to get it. Now let me transition to and from `height/width: auto` damn it.

chearon 5y ago
I often have to set `min-width: 0` if it's a flexbox inside another flexbox. `min-width` defaults to `auto` which means the smaller of the `width` on it and its content width. The content width of a flexbox (being checked here as a flex item) is not defined as the smallest width it could be without overflowing, though. It's based on the content widths of _its_ flex items, regardless of whether or not you put `min-width: 0` on those [1]. So even if that inner flexbox can shrink below the items content width, its default minimum size will be larger than that. It feels wrong when you have to do it, but it also preserves the meaning of minimum _content_, and it might be what you want in other situations. Width/height: auto require a layout to know the size, so I don't know if we'll ever get that either. [1] https://www.w3.org/TR/css-flexbox-1/#intrinsic-main-sizes https://www.w3.org/TR/css-flexbox-1/#intrinsic-main-sizes
- deergomoo 5y ago
  That was a very good explanation, thank you. > Width/height: auto require a layout to know the size, so I don't know if we'll ever get that either Surely the browser ultimately knows what the size is going to be?
  - chearon 5y ago
    It does but only after a layout. Interpolating from `height: 0;` to `height: 10px` is easy, but interpolating to `height: auto` takes an additional layout. I always assumed that you can't do this either for performance reasons or because it would be really hard to implement.

chearon 5y ago

I often have to set `min-width: 0` if it's a flexbox inside another flexbox. `min-width` defaults to `auto` which means the smaller of the `width` on it and its content width. The content width of a flexbox (being checked here as a flex item) is not defined as the smallest width it could be without overflowing, though. It's based on the content widths of _its_ flex items, regardless of whether or not you put `min-width: 0` on those [1]. So even if that inner flexbox can shrink below the items content width, its default minimum size will be larger than that. It feels wrong when you have to do it, but it also preserves the meaning of minimum _content_, and it might be what you want in other situations. Width/height: auto require a layout to know the size, so I don't know if we'll ever get that either. [1] https://www.w3.org/TR/css-flexbox-1/#intrinsic-main-sizes https://www.w3.org/TR/css-flexbox-1/#intrinsic-main-sizes

deergomoo 5y ago
That was a very good explanation, thank you. > Width/height: auto require a layout to know the size, so I don't know if we'll ever get that either Surely the browser ultimately knows what the size is going to be?
- chearon 5y ago
  It does but only after a layout. Interpolating from `height: 0;` to `height: 10px` is easy, but interpolating to `height: auto` takes an additional layout. I always assumed that you can't do this either for performance reasons or because it would be really hard to implement.