<div class="container first">
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
</div>
<div class="container second">
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
</div>

/* コンテナとして設定 */
.container {
  container-type: inline-size;
  border: 1px solid black;
  border-radius: 5px;
}
.container + .container {
  margin-top: 20px;
}
.first {
  width: 500px;

}
.second {
  width: 200px;
}

/* コンテナクエリ部分 */
@container (min-width: 300px) {
  ul {
    display: flex;
    justify-content: space-between;
  }
  li {
    width: 33%;
  }
}