CSS grid-template-rows "min-content" not working

by Flyout

HTML

<div style="
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto) 1fr;
  grid-template-areas:
    'coord-label coord-data'
    'separator separator'
    'catering-label catering-data'
    'catering-total catering-data';
  border: 1px solid black;
">

  <div style="grid-area: coord-label; background: lightblue;">
    Coordinates
  </div>

  <div style="grid-area: coord-data; background: lightgreen;">
    Mr DUPONT Jean
  </div>

  <div style="grid-area: separator; background: gray;">
    Separator
  </div>

  <div style="grid-area: catering-label; background: lightblue;">
    Catering
  </div>

  <div style="grid-area: catering-data; background: lightgreen;">
    <p>Morning</p>
    <p>Lunch</p>
    <p>Snack</p>
    <p>Dinner</p>
  </div>

  <div style="grid-area: catering-total; background: lightsalmon;">
    Total : 0.00 €
  </div>
</div>