動的に作成されたdivスタックを行単位で作成する方法

Question

子divを下に配置したいので、親div内に作成される子divはほとんどありません。私はcssを使用して子divを強制的に下に落としますが、いくつかの子div が作成された場合は、それらも行単位で表示されますが、現在のところ、結果は何個のchild divが作成されても関係ありません。同じ行に表示されます。子divを行単位で表示させるにはどうすればよいですか？ここに私のCSSがあります。

.myProgress { 
    position: relative; 
    display:flex; 
    width: 100%; 
    height: 30px; 
    margin-top: auto; 
    margin-bottom:150px; 
    background-color: #ddd; 
} 

.myBar { 
    position: relative; 
    width: 1%; 
    height: 100%; 
    margin-top: auto; 
    background-color: #4CAF50; 
} 

.nav { 
    float: left; 
    display:flex; 
    width: 40%; 
    margin: 0; 
    padding: 1px; 
} 
<div class="nav"> 
    <div id="myProgress" class="myProgress" style="width:350px;"> 
     <div id="div01" class="myBar" style="width: 100%;"></div> 
     <div id="div02" class="myBar" style="width: 100%;"></div> 
     <div id="div03" class="myBar" style="width: 100%;"></div> 
    </div> 
</div> 

ここで3つのdivの結果は、同じ行に落ちる、私はそれがボトムCSSに入れられる力によって引き起こされるべきだと思った。私は一番下に置くことができますが行ごとに表示する方法はありますか？ 3つの子divが3行を表示する場合は？

Answer 1

使用このCSS、

.myProgress { 
/* position: relative; 
    display:flex;*/ 
    width: 100%; 
    height: 30px; 
    margin-top: auto; 
    margin-bottom:150px; 
    background-color: #ddd; 
} 

.myBar { 
/* position: relative;*/ 
    width: 100%; 
    height: 100%; 
    margin-top: auto; 
    background-color: #4CAF50; 
    float:left; 
} 

.nav { 
    float: left; 
    display:flex; 
    width: 40%; 
    margin: 0; 
    padding: 1px; 
} 

Answer 2

あなたはまた.myProgressにflex-direction: column;を追加する場合、それが最後の下にそれぞれのdivを追加しますdisplay:flex;

.myProgress上を使用しています。

JS Fiddle

More info on Flexbox