flex div, Chrome

Question

Son zamanlarda büyüyecek. Son zamanlarda CSS'de esneklik ile uğraştım. Amacım, eşit yüksekliğe sahip çeşitli sütunlar içeren bir düzen oluşturmak ve içeriğin eşit aralıklarla yerleştirilmesiydi. Ben ancak Chrome'da Firefox'ta çalışmaktadır çözümü (hatalı davranışı ile asgari örnek) bulunan:

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 alır):

.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; 
    } 
    } 
} 

bu jsfiddle bakınız:

: https://jsfiddle.net/zn463f1j/

İşte iki tarayıcılar aynı fiddle hale nasıl görüntülerdir

Firefox (nasıl olmalı):

Krom:

Benim soru ben her iki tarayıcılarda çalışan almak için, Remov veya değişikliği eklemem gerekiyor ne stilleri olduğunu.

Aşağıdaki CSS'yi denedim ancak bu, firefox'un Chrome gibi görüntülemesine neden oldu. 'un 100%'dan auto'a değiştirilmesi, kodun yine Firefox'ta çalışmasını sağladı, ancak yine de Chrome'da değil.

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

Answer 1

İşte cevabı. Kodu kontrol edin ve sonuç aşağıda.

Sonuç:

.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>