<div class="parent">
  <div class="wrapper">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
</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.