根据通用容器大小更改网格布局（不使用类）

Question

In the following example I have two containers for a flex item. When the container is 300px I want the two 150px boxes to be side by side (as seen in the example). When the container is 150 however I'd like to change the container display to block to have them stacked on each other (we shouldn't see the yellow below).

Is it possible to write CSS WITHOUT leveraging the example_1 or example_2 classes and just referencing their container? I tried Chromes @container query but this didn't work... any help appreciated!!

 .example_1 { width: 300px; height: 30px; background-color: yellow; }.example_2 { width: 150px; height: 60px; background-color: yellow; }.flex-thing { display: flex; flex-direction: row; width: max-content; justify-content: stretch; }.flex-thing.item { background-color: red; width: 150px; height: 30px; border: solid 1px black; }

 <div class="example_1"> <div class="flex-thing"> <div class="item"></div> <div class="item"></div> </div> </div> <br> <div class="example_2"> <div class="flex-thing"> <div class="item"></div> <div class="item"></div> </div> </div>

Answer 1

If you want the red box to auto wrap down to second line, you need to add flex-wrap: wrap; to the container. or you can add

.example_2 .flex-thing{
   flex-direction: column;
}