Display flex with gap not working in Safari (IPhone)-CodePudding

I need to render a list of products in a column. I used display: flex with gap. In all browsers, it works fine but in Safari the gap is not working. There are no spaces (gaps) between products.

How can I solve this problem?

Live example

.wrapper {
  padding-top: 1.3125rem;
  padding-bottom: 2.5rem;
  display: flex;
  flex-flow: column;
  gap: 1rem;
}

.product {
  background: red;
}

<html>
<div >
  <div >
    Ahoj
  </div>
  <div >
    Ahoj
  </div>
  <div >
    Ahoj
  </div>
  <div >
    Ahoj
  </div>
  <div >
    Ahoj
  </div>
  <div >
    Ahoj
  </div>

</div>

</html>

CodePudding user response：

Replace flex with grid because flex gap is not supported in safari version below 14 use :

display: grid;
grid-gap: 1rem;
gap: 1rem

CodePudding user response：

After update IOS (including safari) problem solved.