Flexbox делает все столбцы в Safari

Question

Я пытаюсь создать двухколоночную раскладку для сайта, и у меня все хорошо работает в 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; } 

я делаю что-то, очевидно, не так?

Answer 1

ОК, так что после долгих экспериментов я, кажется, нашли решение - кажется, что просто установив max-width не режет его, так что я должен был явно установить width: 50%;, чтобы получить все согласования должным образом.