container-query-polyfill icon indicating copy to clipboard operation
container-query-polyfill copied to clipboard

Requesting container height on container-type: inline-size

Open KolyaKorruptis opened this issue 2 years ago • 1 comments

Using this polyfill I can request a container's height on a container-type: inline-size:

.teaser {
  container-type: inline-size;
}

@container (min-height: 530px) {
 ...
}

Live-Example

My understanding is that this request on the block-axis should only be possible if container-type: size;. Is the current behavior according to spec?

KolyaKorruptis avatar Apr 21 '22 13:04 KolyaKorruptis

This is the part of the spec I am referring to: https://drafts.csswg.org/css-contain-3/#container-type

size: Establishes a query container for container size queries on both the inline and block axis. inline-size: Establishes a query container for container size queries on the container’s own inline axis.

Chrome's native implementation does not follow a height-request on a container-type: inline-size, but the polyfill does. Not that I'm complaining, I just want to write CSS that works for native implementations in future. And this is at least a gotcha.

KolyaKorruptis avatar Apr 22 '22 09:04 KolyaKorruptis

Thank you for your issue!

The newest version of the polyfill (currently in alpha) more closely follows the spec, and does not allow you to query e.g. block-size on an inline-size container.

devknoll avatar Aug 16 '22 16:08 devknoll