Safari flex-box

Question

尝试使用flexbox为我的应用做出响应式布局。 Flexbox在safari上工作不正确。 方向排时，一切正常。 但是对于列布局的破坏。不明白为什么。 已经尝试更改前缀。（不是autoprefix问题）

在chrome：gif

在野生动物园：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>      

由react-create-app创建的应用程序，所以我有autoprefixer。 如何在safari中修复此布局？

更新：

当我想要布局宽度为50％的元素时，所有工作。 但是我如何才能使用flex：1？