Safari flex-box - safari

Question

Trying to make responsive layout for my app with flexbox.
Flexbox working incorrect at safari.
When direction is row, all working right.
But for column layout broken. Having not idea why.
Already tried changing prefixes.(not autoprefix problem)
At chrome: gif
At safari: gif
sass:
$right-section-color: #98ee99
$left-section-color: fade_out(grey,0.8)
$font-color: fade_out(black,0.3)
.AllSection
width: 100%
color: $font-color
.Banner
#extend .BannerSection
.section
display: flex
justify-content: center
flex-direction: row
span
margin: auto
padding: 0
flex: 1
.imageWithText
flex: 1
margin: auto
display: flex
flex-direction: column
text-align: center
img
max-width: 10em
height: 100%
width: 100%
margin: auto
.text
flex: 1
margin: auto
#for $i from 1 through 5
#if($i % 2 == 0)
.section:nth-child(#{$i})
background-color: $left-section-color
#media #{$small-and-down}
flex-direction: column
#else
.section:nth-child(#{$i})
background-color: $right-section-color
#media #{$small-and-down}
flex-direction: column-reverse
jsx:
<Element name="AllSection" className="AllSection">
<div className="Banner">
<h3>Диспоузер Status це</h3>
</div>
<div className="section">
<div className="imageWithText">
<img src={ecoLogo} id='ecoLogo' alt="eco logo" />
<span>Екологічно</span>
</div>
<div className="text">
<span>Використання подрібнювача скорочує обсяг перевезеного на звалища сміття. Крім того, харчові
відходи є сировиною для виробництва біогазу. </span>
</div>
</div>
<div className="section">
<div className="text">
<span>Подрібнювачі миттєво усувають харчові відходи c кухні. Тепер не потрібно зберігати їх в сміттєвому відрі - джерелі неприємних запахів і бактерій.</span>
</div>
<div className="imageWithText">
<img src={wastedFood} alt="wasted food" />
<span>Гігієнічно</span>
</div>
</div>
<div className="section">
<div className="imageWithText">
<img src={kitchenPicture} alt="kitchen washer" />
<span>Практично</span>
</div>
<div className="text">
<span>Подрібнювач акуратно і легко встановлюється під раковину і не вимагає додаткових площ на
кухні. </span>
</div>
</div>
<div className="section">
<div className="text">
<span>Подрібнювач абсолютно безпечний для дітей і дорослих. Всередині немає ножів і шнеків.
Додаткову електробезпеку забезпечує пневмовимикач. </span>
</div>
<div className="imageWithText">
<img src={safetyIcon} alt="wasted food" />
<span>Безпечно</span>
</div>
</div>
</Element>
App created by react-create-app, so i have autoprefixer.
How can I fix this layout in safari?
UPDATE:
When setting width to 50% of element i want to layout, all working.
But how can i make it with flex: 1?