📄Modern Component-Oriented Responsive Design with @container

#css #container

The modern CSS specification offers container queries via the @container at-rule for this requirement.

Look at the following sample:

<div class="alert">
  <h3>Lorem ipsum dolor sit amet</h3>
  <button>Lorem ipsum</button>
  <button>Lorem ipsum</button>
</div>

.alert {
  background-color: #ddd;
  padding: 12px;
  resize: horizontal;
  overflow: hidden;
  container-type: inline-size;
}

.alert h3 {
  padding: 0 0 6px 0;
  margin: 0 0 12px 0;
  border-bottom: solid 2px #eb7e3b;
}

.alert button {
  padding: 12px;
  border: none;
  margin-right: 6px;
}

@container (width < 400px) {
  .alert button {
    width: 100%;
    box-sizing: border-box;
  }
  
  .alert button:not(:last-child) {
    margin-bottom: 10px;
  }
}