<!DOCTYPE html>
<style>
  @container name (min-width: 0px) {
    main {
      --match: true;
    }
  }

  #a {
    outline: 1px solid red;
    height: 150px;
    resize: both;
    overflow: auto;
    container-type: size;
  }

  h1 {
    font-size: 10px;
  }

  @container ((min-width: 200px) and (min-height: 200px)) {
    h1 {
      font-size: 30px;
    }
  }

  @container ((max-width: 200px) and (max-height: 200px)) {
    h1 {
      font-size: 20px;
    }
  }
</style>
<div id="a">
  <div id="b">
    <h1>H1