Comments on: Container Query for “is there enough space outside this element?” https://frontendmasters.com/blog/container-query-for-is-there-enough-space-outside-this-element/ Helping Your Journey to Senior Developer Mon, 09 Jun 2025 23:10:43 +0000 hourly 1 https://wordpress.org/?v=6.9 By: Karl https://frontendmasters.com/blog/container-query-for-is-there-enough-space-outside-this-element/#comment-29910 Mon, 09 Jun 2025 23:10:43 +0000 https://frontendmasters.com/blog/?p=5796#comment-29910 In reply to Chris Coyier.

Yeah, super weird. I didn’t spend much time digging into it. I wonder if it’s a known Webkit bug and if they’re doing something about it, but to be honest, hunting down that sort of thing makes me weary.

Anyway… I love it that you’re posting so much on this blog. You are an internet treasure. ❤️

]]> By: Chris Coyier https://frontendmasters.com/blog/container-query-for-is-there-enough-space-outside-this-element/#comment-29779 Sat, 07 Jun 2025 16:26:52 +0000 https://frontendmasters.com/blog/?p=5796#comment-29779 In reply to Karl.

Oh gosh how STRANGE. Using grid on that inner container really does NOT want to work in Safari. I poked at it a little bit but your flexbox idea doesn’t the job nicely. I updated mine to that just for sake of this article having more usable code in it.

]]> By: Karl https://frontendmasters.com/blog/container-query-for-is-there-enough-space-outside-this-element/#comment-29708 Fri, 06 Jun 2025 13:03:06 +0000 https://frontendmasters.com/blog/?p=5796#comment-29708 Hey Chris, this is really cool! I noticed, though, that it doesn’t work in Webkit-based browsers (Safari, Orion, etc). I mean, the container query stuff works, but the arrows never align properly. I tweaked it a bit to get things lining up right:
https://codepen.io/kswedberg/pen/vEOZEqd?editors=1100

]]> By: pd https://frontendmasters.com/blog/container-query-for-is-there-enough-space-outside-this-element/#comment-27813 Wed, 14 May 2025 08:04:17 +0000 https://frontendmasters.com/blog/?p=5796#comment-27813 Thanks for sharing.

Always the way to find a reference after the fact 😊

I wonder if this might be applied to popover ‘foot’ notes in vacant margin space. A use case that looked handy when everyone was looking at popover a few months ago.

]]>