Почему Flex-Wrap: Wrap не работает на сафари

Question

У меня есть три контейнера DIV с Bootstrap 3 , причем первые два находятся в первом ряду, а третий в следующем ряду до ширины браузера до 991 px. Выше 992 px все три контейнера должны находиться в одном ряду. Высота контейнеров в ряду должна быть максимальной (100%).

Мой пример работает с Chrome так, как я хочу. К сожалению Safari на macOS и iOS нет. В Safari меньше 992px отображают два первых контейнера один под другим, а не рядом.

Как обходится это?

.inner-container{
          background-color: #f0f0f0;
          padding: 10px;
          font-size: 16px;
          height: 100%;
        }

        @media (max-width: 991px) {
          .map{
            height: 250px;
            margin-top: 15px;
          }
          .row{
            display: flex;
            flex-wrap: wrap;
          }
        }

        @media (min-width: 992px) {
          .row{
            display: flex;
          }
        }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
          <div class="row">
            <div class="col-xs-6 col-md-4">
                <div class="inner-container">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                </div>
            </div>
            <div class="col-xs-6 col-md-4">
                <div class="inner-container">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. AtLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At</p>
                </div>
            </div>
            <div class="col-xs-12 col-md-4">
                <div class="inner-container map">
                    <p>map</p>
                </div>
            </div>
          </div>
        </div>

Answer 1

Попробуйте это:

@media (max-width: 991px) {
  .map{
    height: 250px;
    margin-top: 15px;
  }
  .row{
    display: -webkit-flex; #this
    display: flex;
    -webkit-flex-wrap: wrap; #this
    flex-wrap: wrap;
  }
}

Для дополнительной проверки это .

Answer 2

in this row take outer container div place all 3 div in container
<div class="div-container">
</div>

 @media (min-width: 992px) {
      .div-container{
        display: inline-block;
      }
    }