<div class="type-1">
  <div class="main-1"></div>
  <div class="main-2"></div>
</div><div class="type-2">
  <div class="main-3"></div>
  <div class="main-4"></div>
</div>

body > div {
  &.type-1 {
    padding: 1em;
    height: calc(50vh - 1em);
    container-type: size;
    .main-1 {
      /* ↓ 直近のコンテナは .type-1 な為そこから計算 */
      height: 25cqh;
    }
    /* ↓ .type-1 が コンテナな為、利く */
    @container (block-size >= 0) {
      .main-2 {
        height: 25cqh;
      }
    }
  }
  &.type-2 {
    padding: 1em;
    height: calc(50vh - 1em);
    .main-3 {
      /* ↓直近のコンテナが無い場合は 小さなビューポート 換算で svh 相当で計算される */
      height: 25cqh;
    }
    /* ↓ .type-2 が コンテナでない為、利かない */
    @container (block-size >= 0) {
      .main-4 {
        height: 25cqh;
      }
    }
  }
  /* #region 背景色定義 */
  &.type-1 {
    &::before {
      display: content;
      content: ".type-1";
      background: color(from white srgb r g b / 0.5);
    }
    background-color: blue;
  }
  .main-1 {
    &::before {
      display: content;
      content: ".main-1";
      background: color(from white srgb r g b / 0.5);
    }
    background-color: red;
  }
  .main-2 {
    &::before {
      display: content;
      content: ".main-2";
      background: color(from white srgb r g b / 0.5);
    }
    background-color: green;
  }
  &.type-2 {
    &::before {
      display: content;
      content: ".type-2";
      background: color(from white srgb r g b / 0.5);
    }
    background-color: palevioletred;
  }
  .main-3 {
    &::before {
      display: content;
      content: ".main-3";
      background: color(from white srgb r g b / 0.5);
    }
    background-color: yellow;
  }
  .main-4 {
    &::before {
      display: content;
      content: ".main-4";
      background: color(from white srgb r g b / 0.5);
    }
    background-color: orange;
  }
  /* #endregion */
}