Flexbox 使 Safari 中的所有内容都成为列

Question

我正在尝试为站点创建一个两栏布局，并且在 Chrome、FireFox 和 IE10/11 中一切正常，但是在 Safari 中，新闻 pods 是列化的，而不是像他们应该的那样每行两个。

附上两张图片，上图显示我正在努力实现的目标（以及我在 Chrome/FireFox/IE10 和 11 上看到的内容），下图显示 Safari 中发生的情况。

我用来实现这个的 CSS 如下：

.news__listing {
    float: left;
    display: block;
    margin-right: 3.84615%;
    width: 65.38462%;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
    -ms-flex-direction: row;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -moz-box-align: start;
    box-align: start;
    -webkit-align-items: flex-start;
    -moz-align-items: flex-start;
    -ms-align-items: flex-start;
    -o-align-items: flex-start;
    align-items: flex-start;
    -ms-flex-align: start; }
    .news__listing:last-child {
      margin-right: 0; }
    .news__listing:nth-child(2n) {
      margin-right: 0; }
    .news__listing:nth-child(2n+1) {
      clear: left; }

.news__listing .c-article {
      max-width: 50%;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      box-orient: vertical;
      -webkit-box-direction: normal;
      -moz-box-direction: normal;
      box-direction: normal;
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      flex-direction: column;
      -ms-flex-direction: column;
      -webkit-flex-shrink: 0;
      -moz-flex-shrink: 0;
      flex-shrink: 0;
      -ms-flex-negative: 0; }

我做错了什么吗？

Answer 1

好的，经过多次试验，我似乎找到了解决方案 - 似乎只是设置 max-width 并不能解决问题，所以我必须明确设置 width: 50%; 才能获得一切都正确对齐。

Flexbox 使 Safari 中的所有内容都成为列

Flexbox making everything columns in Safari

css

safari

flexbox