How to query whether a container is higher than the viewport?

  Kiến thức lập trình

I am playing around with container queries and trying to understand them better.

One idea I wanted to implemented is, to aooky specific styles, when a container extends the viewport, or in other words when the content extends the container.
Based on an article, I tried it with container-type: size and adding height and overflow on the container element.

I made a CodePen with an example: https://codepen.io/Kageetai/pen/LYvMMwx
In there I wanted to make the text red, if the container is higher than the viewport.

My understanding from some other research though is that it’s not possible to query for container height, at least not if it’s a variable height, like height: 100% or so. It seems that might never be possible to implemented, due to the loop of rendering a specific height and then querying for the same height.

So my question is: Does anyone else have any insight on this and/or the current state of affairs around container queries?

LEAVE A COMMENT