Flexbox not working in Safari and IOS - ios

Question

I have made a responsive flexbox grid. It works in Chrome, but not in Safari and IOS. I must be missing something. Can anyone tell me what I'm doing wrong?
codepen
section {
max-width: 1280px;
display: block;
margin: 0 auto;
}
section:not(.grid) {
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.box {
-webkit-box-flex: 1;
-webkit-flex: 1 1 12em;
-ms-flex: 1 1 12em;
flex: 1 1 12em;
}
}
.wrapper {
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(12em, 1fr))[auto-fill];
grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
}
.box {
padding-right: 1em;
}
.box:last-of-type {
padding-right: 0;
}

Answer 1

Remove this enclosing element from your SCSS, but keep everything inside it:
section:not(.grid) {}
it means those flex styles will NOT be applied.
section {
max-width: 1280px;
display: block;
margin: 0 auto;
border: 1px dashed red;
}
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.box {
-webkit-box-flex: 1;
-webkit-flex: 1 1 12em;
-ms-flex: 1 1 12em;
flex: 1 1 12em;
border: 1px dashed blue;
}
.wrapper {
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(12em, 1fr))[auto-fill];
grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
}
.box {
padding-right: 1em;
}
.box:last-of-type {
padding-right: 0;
}
<section class="grid">
<h4>All projects</h4>
<div class="wrapper">
<div class="box">
<h5>Project 1<br>
<span>Category</span>
</h5>
</div>
<div class="box">
<h5>Project 2<br>
<span>Category</span>
</h5>
</div>
<div class="box">
<h5>Project 3<br>
<span>Category</span>
</h5>
</div>
<div class="box">
<h5>Project 4<br>
<span>Category</span>
</h5>
</div>
<div class="box">
<h5>Project 5<br>
<span>Category</span>
</h5>
</div>
<div class="box">
<h5>Project 6<br>
<span>Category</span>
</h5>
</div>
</div>
</section>