<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <!-- <div class="child">3 also works</div> -->
</div>

@mixin container-query ($maxWidth: 400px, $margin: 1rem) {
  display: flex;
  flex-wrap: wrap;
  margin: -$margin;
  
  & > * {
    flex-grow: 1;
    width: 100%; /* fallback */
    flex-basis: calc( 
      (#{$maxWidth} * 999.999) - (100% * 999.999) 
    );
    margin: $margin;
  }
}

// apply the mixin
.container {
  @include container-query;
}

// lightly style the demo
.child {
  background: lightgray;
  min-height: 3rem;
}