trying to replicate the layout "fit as needed" or "Ram" for IE 11 but items are being stretched when they should not

I am trying to replicate this layout they are both similar but with different applications:

the RAM from 1 line layout https://codepen.io/una/pen/oNbvNQv

the fit as needed from css tricks https://codepen.io/geoffgraham/pen/EbVELV

I can emulate almost all with flexbox but the row that goes to the new line if they break to it should not grow while the one above should. Here is the code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      display: flex;
      flex-wrap: wrap;
      /* flex-flow: row wrap; */
      height: 100vh;
      margin: -1rem 0 0 -1rem;
    }
    div {
      margin: 1rem 0 0 1rem;
      display: flex;
      /* id I set flex grow to 1, the items on the top grows as the should but the item in the new line should not */
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: calc(25% - 1rem);
      min-width: 200px;
      background: lightpink;
      align-items: center;
      justify-content: center;
    }

    @supports (display: grid) {
      body {
        display: grid;
        height: 100vh;
        gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      }
    }

    @supports (display: grid) {
      div {
        display: grid;
        place-items: center;
        background: lightpink;
      }
    }

    body {
      font-family: system-ui, sans-serif;
    }
  </style>
  <body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </body>
</html>

as you can see changing flex-grow to 1 will make the items above keep growing but it should not happens to the one below as it should keep it's 200px.

are there any other ways to implement this that would work for this example, probably that does not rely on flex basis and don't use media queries?