flex div не будет расти до высоты родителя в Chrome

Question

Я в последнее время возился с flex в CSS. Моя цель состояла в том, чтобы создать макет с несколькими столбцами с равной высотой и чтобы содержимое было равномерно распределено между ними. Я нашел решение, которое работает в Firefox, но не в Chrome (минимальный пример с ошибочным поведением):

HTML:

<div class="row"> 
    <div class="col-sm-6"> 
    <div> 
     <div class="item"> 
     Content 
     </div> 
     <div class="item"> 
     Content 
     </div> 
     <div class="item"> 
     Content 
     </div> 
    </div> 
    </div> 
    <div class="col-sm-6"> 
    <div> 
     <div class="item"> 
     Content 
     </div> 
     <div class="item"> 
     Content 
     </div> 
     <div class="item"> 
     Content 
     </div> 
     <div class="item"> 
     Content 
     </div> 
    </div> 
    </div> 
</div> 

SCSS (получает autoprefixed):

.row { 
    display: flex; 
    flex-flow: row wrap; 

    .col-sm-6 > div { 
    display: flex; 
    flex-flow: column nowrap; 
    justify-content: space-between; 
    height: 100%; 

    .item { 
     height: 20px; 
     text-align: center; 
     background-color: red; 
     margin: 2px; 
    } 
    } 
} 

Смотрите эту jsfiddle: https://jsfiddle.net/zn463f1j/

Вот изображения того, как два браузера визуализируют ту же скрипку:

Firefox (как это должно быть):

Chrome:

Так что мой вопрос, какие стили мне нужно добавить, убр или изменения для того, чтобы заставить его работать в обоих браузерах.

Я пробовал использовать следующий CSS, но это привело к тому, что firefox также отображал его как Chrome. Изменение height от 100% до auto снова заработало код в Firefox, но все еще не в Chrome.

.row .col-sm-6 { 
    height: 100%; 
} 

Answer 1

Вот ответ. Проверьте код и результат ниже.

Результат:

.row { 
 
    display: flex; 
 
} 
 
.row .col-sm-6 { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.row .col-sm-6 > div { 
 
    display: flex; 
 
    flex: 1; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
} 
 
.row .col-sm-6 > div .item { 
 
    height: 20px; 
 
    text-align: center; 
 
    background-color: red; 
 
    margin: 2px; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="row"> 
 
    <div class="col-sm-6"> 
 
    <div> 
 
     <div class="item"> 
 
     Content 
 
     </div> 
 
     <div class="item"> 
 
     Content 
 
     </div> 
 
     <div class="item"> 
 
     Content 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-6"> 
 
    <div> 
 
     <div class="item"> 
 
     Content 
 
     </div> 
 
     <div class="item"> 
 
     Content 
 
     </div> 
 
     <div class="item"> 
 
     Content 
 
     </div> 
 
     <div class="item"> 
 
     Content 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>