I have few child div that will be created inside parent div , because I want the child div to be dropped to the bottom. I use css to force the child div to drop to the bottom, however I also want if several child div 
are created, they will displayed in row by row, but currently the outcome is no matter how many child div are created, they are displayed in same line. How can I make the child div displayed row by row? Here is my 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>

```

And here is the outcome of three div, they drop to the the same row, I thought it should be caused by force of put into bottom css. Is there a way that I can put into the bottom but displayed row by row ,e.g. if three child div then display three row?