html - 为什么 flex-wrap : wrap not work on safari

Question

我有三个带有 Bootstrap 3 的 DIV 容器，其中前两个在第一行，第三个在下一行，直到浏览器宽度直到 991 px。高于 992 px，所有三个容器应排成一行。每行容器的高度应该是最高的 (100%)。

我的示例以我希望的方式与 Chrome 一起工作。不幸的是，Safari 不适用于 ma​​cOS 和 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

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;
      }
    }