<div class="parent">
  <div class="wrapper">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
.parent {
  overflow: hidden;
  width: 300px;
  padding: 20px;
  background-color: #ccc;
  resize: horizontal;
  container-type: inline-size;
  container-name: my-lovely-container;

.wrapper {
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  background-color: #444;

.circle {
  width: 50px;
  height: 50px;
  background-color: #666;
  border-radius: 50%;

@container my-lovely-container (max-width: 300px)  and (min-width: 250px) {
  .circle:nth-child(1) {
    background-color: red;

@container my-lovely-container (max-width: 250px) and (min-width: 150px) {
  .circle:nth-child(2) {
    background-color: yellow;

@container my-lovely-container (max-width: 150px) {
  .circle:nth-child(3) {
    background-color: green;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.