Get your own website Result Size: 625 x 565
x
 
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
  container-name: myContainer;
  container-type: inline-size;
}
/* Add styles if myContainer is less than 500px wide */
@container myContainer (width < 500px) {
  .child {
    width: 50%;
    border: 2px solid maroon;    
    background-color: salmon;
  }
}
</style>
</head>
<body>
<h1>Demo of @container</h1>
<p>Resize the page to see the effect.</p>
<div class="parent">
  <div class="child">
    <h2>A header</h2>
    <p>Some text.</p>
  </div>
</div>
</body>
</html>