p {margin-bottom: 2rem}

body {
  padding: 2rem;
  margin: 0 auto;
  max-width: 60rem;
}

.container {
  display: flex;
  flex-wrap: wrap;
  
  --gutter: 2rem;
  margin: calc(var(--gutter) / 2 * -1);
  
  --breakpoint: 40rem;
  --modifier: calc((var(--breakpoint) - 100%) * 999); 
  
  background:pink;
  color:white;
}

.container > * {
  background-color: #000;
  flex-grow:1;

  flex-basis: max(var(--width, var(--auto-width)), var(--modifier));
  max-width: max(var(--width, var(--max-width)), var(--modifier));
  
  height: 20vh;
  margin: calc(var(--gutter) / 2);
  
  --auto-width: calc(99.999% * var(--w, 0) - var(--gutter));
  --max-width:  calc(99.999% * var(--w) - var(--gutter));
}

.container > *:first-child {
  --w:1/2;
}

.container > *:nth-child(2) {
  /* shrink-wrap */
  --w:0;
  min-width: min-content;
}

.container > *:last-child {
  --width:100px;
}