We now have a solution to this in the form of Container Scroll-state Queries. [MDN will explain better than I can](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_conditional_rules/Container_scroll-state_queries), but in short:
Set the element which overflows to be a container with the type `scroll-state`:
``` .container { container-type: scroll-state; container-name: my-container; } ```
You can then use the container query to apply whatever css you want for whatever conditions you want. For example, setting the child to red when the container can be scrolled horizontally:
``` @container my-container scroll-state(scrollable: x) { .child { background-color: red; } } ```
For a full list of available scroll states, [see here](https://developer.mozilla.org/en-US/docs/Web/CSS/@container#scrollable).
*Note: [Browser support](https://developer.mozilla.org/en-US/docs/Web/CSS/@container#browser_compatibility) for this is currently limited to Chrome and Edge only.*
Full example below. Try changing the container height:
<!-- begin snippet: js hide: false console: true babel: false babelPresetReact: false babelPresetTS: false -->
<!-- language: lang-css -->
/* For appearances */
.container { background-color: #ccc; border-radius: 15px; margin: 0 auto; padding: 0 10px; width: 100px; height: 100px; resize: vertical; }
.child { background-color: #dd2255; border-radius: 15px; display: flex; justify-content: center; align-items: center; width: 100%; height: 20px; margin: 10px 0; }
/* Necessary for effect */
.container { container-type: scroll-state; container-name: my-container; overflow-y: auto; }
@container my-container scroll-state(scrollable: y) { .child { background-color: #5522dd; } }
<!-- language: lang-html -->
<div class="container"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> </div>
<!-- end snippet -->

We're at last getting a CSS solution to this in 2025 in the form of Container Scroll-state Queries. [MDN will explain better than I can](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_conditional_rules/Container_scroll-state_queries), but in short:
Set the element which overflows to be a container with the type `scroll-state`:
``` .container { container-type: scroll-state; container-name: my-container; } ```
You can then use the container query to apply whatever css you want for whatever conditions you want. For example, setting the child to red when the container can be scrolled horizontally:
``` @container my-container scroll-state(scrollable: x) { .child { background-color: red; } } ```
For a full list of available scroll states, [see here](https://developer.mozilla.org/en-US/docs/Web/CSS/@container#scrollable).
*Note: [Browser support](https://developer.mozilla.org/en-US/docs/Web/CSS/@container#browser_compatibility) for this is currently limited to Chrome only.*
Full example below. Try changing the container height:
<!-- begin snippet: js hide: false console: true babel: false babelPresetReact: false babelPresetTS: false -->
<!-- language: lang-css -->
/* For appearances */
.container { background-color: #ccc; border-radius: 15px; margin: 0 auto; padding: 0 10px; width: 100px; height: 75px; resize: vertical; }
.child { background-color: #dd2255; border-radius: 15px; display: flex; justify-content: center; align-items: center; width: 100%; height: 20px; margin: 10px 0; }
/* Necessary for effect */
.container { container-type: scroll-state; container-name: my-container; overflow-y: auto; }
@container my-container scroll-state(scrollable: y) { .child { background-color: #5522dd; } }
<!-- language: lang-html -->
<div class="container"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> </div>
<!-- end snippet -->