<section>
  <h2 class="section-title">Full width parent:</h2>
  <div class="flex-container">
    <div></div>
    <div></div>
    <div></div>
  </div>
</section>

<section class="narrow">
  <h2 class="section-title">Narrower example:</h2>
  <div class="flex-container">
    <div></div>
    <div></div>
    <div></div>
  </div>
</section>

.flex-container {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;

  container-type: inline-size;
}

.flex-container > * {
  /* full-width at small sizes */
  flex-basis: 100%;
  flex-grow: 1;

  /* when there is room for 3 columns including gap */
  @container (width > calc(200px * 3 + 2rem)) {
    flex-basis: calc(200px);
  }
}

.narrow {
  width: 70%;
  margin-inline: auto;
}

@layer not-demo-related {
  body {
    display: grid;
    gap: 2rem;
    font-family: system-ui;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .flex-container {
    padding: 1rem;
    outline: 3px solid dodgerblue;
  }

  .flex-container > * {
    /*     padding: 1rem; */
    height: 5rem;
    background: orangered;
  }
}