css - Flexbox在Safari中制作所有列

我正在尝试为网站创建两列布局，并且在Chrome，FireFox和IE10 / 11中一切正常，但是在Safari中，新闻窗格是按列的，而不是每行两个应该。

随附的是两张图片，最上面显示了我想要达到的目标（以及我在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; }

我在做任何明显错误的事情吗？

最佳答案

好的，经过大量的实验，我似乎找到了解决方案-似乎只是设置max-width并不能解决问题，因此我必须明确设置width: 50%;才能使所有内容正确对齐。

关于css - Flexbox在Safari中制作所有列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32625591/