{"id":5796,"date":"2025-05-13T11:26:46","date_gmt":"2025-05-13T16:26:46","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=5796"},"modified":"2025-05-13T11:26:47","modified_gmt":"2025-05-13T16:26:47","slug":"container-query-for-is-there-enough-space-outside-this-element","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/container-query-for-is-there-enough-space-outside-this-element\/","title":{"rendered":"Container Query for “is there enough space outside this element?”"},"content":{"rendered":"\n

Say you had a UI component that had pagination arrows for whatever reason. If there was enough space on the outside of that component, you wanted to put those arrows outside<\/em>, like this this:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

But if there isn’t enough room for them without shrinking the main content area, then place them inside<\/em>, like this:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

You could do that with plenty of magic numbers, especially in how big the main content area is. But wouldn’t it be cool if you didn’t have to know? Like the main content area could be whatever, fluid\/responsive\/flexible, and you could still test if there is “room” outside for the arrows or not.<\/p>\n\n\n\n

I was playing with this trick because I remember Adam Argyle talking about it one time, but couldn’t find where he used it. So I wrote this article up to re-learn and document it. Then of course I find the original article.<\/a> So full credit to Adam here. Mine approach here is super similar of course. I think I prefer how his @container<\/code> query uses cqi<\/code> units inside of it in case the parent isn’t the viewport. Clever.<\/p>\n\n\n\n

The trick is in combining viewport units within a container query. You could probably do it by using container units within a media query too, but we’ll go with the former because I tried it and it worked.<\/p>\n\n\n\n

We’re going to need a “wrapper” element because that’s just how @container<\/code> queries tend to be most useful. You can’t query the same element that is the container, so easier if the container is a wrapper. <\/p>\n\n\n

<div class<\/span><\/span>=\"box\"<\/span>>\n  <div<\/span> class<\/span>=\"box-inner\"<\/span>><\/span>\n    <div<\/span> class<\/span>=\"arrow arrow-left\"<\/span>><\/span>\n       <svg<\/span> ...<\/span>><\/span><\/svg<\/span>><\/span>\n    <\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"arrow arrow-right\"<\/span>><\/span>\n       <svg<\/span> ...<\/span>><\/span><\/svg<\/span>><\/span>\n  <\/div<\/span>><\/span>\n<\/div<\/span>><\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The box will be the container:<\/p>\n\n\n
.box<\/span> {\n  container<\/span>: box \/ inline-size;\n  inline-size<\/span>: min<\/span>(500px<\/span>, 100vw<\/span>);\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
I love using that second declaration, which says: “Make the element 500px wide, but if the entire browser window is smaller than that, do that instead.” That element is the container.<\/p>\n\n\n\n
Then we can use a @container<\/code> query on the inside. If we wanted to make a style change exactly<\/em> when the container is the same size as the browser window, we could do this:<\/p>\n\n\n
.box-inner<\/span> {\n  background<\/span>: rebeccapurple;\n  ...\n\n  @container box (inline-size >= 100vw) {\n    background<\/span>: red;\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
That will do this!<\/p>\n\n\n\n\t\t
\n\t\t\t