上位の要素を折り返す

Question

私はそこにいくつかの要素を持つリストを持っています。 アイテムの高さが同じ場合、すべてのアイテムが正しくラップされます。 しかし、1つのアイテムの高さが他のアイテムよりも高い場合、そのアイテムは上位のエレメントの下部にラップされます。

ここでは、私の例を見ることができます：ここでhttps://jsfiddle.net/qqouoL6n/

は私の単純なHTMLリストです：

<div id="flexbox-container"> 
    <div class="small-container"></div> 
    <div class="big-container"></div> 
    <div class="small-container"></div> 
    <div class="small-container"></div> 
    <div class="small-container"></div> 
    <div class="small-container"></div> 
</div> 

あなたがより高い項目を表すクラスで、1つのdiv要素があり、見ることができるようにその他のもの。私はこれらの項目をfloatにフレキシボックスを使用しています

#flexbox-container { 
    width: 220px; 
    background-color: lightgrey; 
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: row; 
    padding: 10px; 
} 

.big-container { 
    background-color: orange; 
    width: 100px; 
    height: 200px; 
    margin-right: 10px; 
    margin-bottom: 10px; 
} 

.small-container { 
    background-color: orange; 
    width: 100px; 
    height: 110px; 
    margin-right: 10px; 
    margin-bottom: 10px; 
} 

： はここにCSSです。すべてのアイテムの高さが同じ場合、すべてが期待通りに機能します。しかし、2番目の項目が他の要素と同じ2倍の高さを持つ場合、項目はその項目を無視します。

私は達成したい、ギャップは次のアイテムでいっぱいです、どうすればいいですか？

Answer 1

代わりにflex-direction: columnを使用するように変更することができますが、項目のいずれかが他の項目よりも広い場合は同じ問題が発生します。また、#flexbox-container DIVにheight属性を指定して、列が実際にページを下ろすのではなく折り返されていないことを確認する必要があります。このような

何か：

#flexbox-container { 
    width: 220px; 
    height: 500px; 
    background-color: lightgrey; 
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: column; 
    padding: 10px; 
} 

ここupdated JSFiddleです。