Flexbox 在 Safari 中制作所有列

Question

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

附上两张图片，顶部显示了我想要实现的目标（以及我在 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%; 才能使所有内容正确对齐。