为什么 flex-wrap: wrap 在 safari 上不起作用答案

【问题标题】：Why does flex-wrap: wrap not work on safari为什么 flex-wrap: wrap 在 safari 上不起作用
【发布时间】：2019-04-05 13:20:20
【问题描述】：

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

我的示例以我想要的方式与 Chrome 一起使用。不幸的是，macOS 和 iOS 上的 Safari 不是。在 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>

【问题讨论】：

这篇文章可能与stackoverflow.com/questions/29986668/…重复
很遗憾没有，因为这篇文章对我没有帮助。如果我使用 flex: 1 1 auto，行为保持不变。
Safari 上应该也有一个网络检查器，可以帮助您测量视口并查看计算的样式。
是的，我使用 webinspektor。我在 safari 和 chrome 上的样式相同，但视图不同。

标签： html css twitter-bootstrap-3 safari flexbox

【解决方案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;
      }
    }

【讨论】：

否，因为如果浏览器宽度大于 991 像素已经可以使用。问题在于小于 992 像素
小于 992 认为平板电脑视图屏幕会缩小 col-md-* 将不起作用 col-sm-* 系列将启动它们将调整为屏幕
好的，但是我已经指定了 col-xs-* 的值，这些值在 col-sm-* 上继承，智能手机和平板电脑上的视图到这个容器是一样的

【解决方案2】：

试试这个：

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

更多信息请查看this。

【讨论】：