logoalt Hacker News

Rumudiezlast Sunday at 8:02 PM2 repliesview on HN

(1) could be answered with container query units. Set `container-type: inline-size;` on the parent element (falls back to the whole viewport if unset), then use, e.g., `width: 50cqw; height: 50cqh` in children. The value is a percentage of the given axis


Replies

1718627440last Sunday at 8:46 PM

Isn't size of the parent element, what the percent values are relative to?

nicoburnslast Sunday at 8:08 PM

I don't think that works if you want to mix "proportion of available space" units with siblings that have a fixed size (a super-common use case for flexbox - having a fixed size box followed by another box that takes up "the rest of the space").