What could be causing the flex item to not move to the next row?
The flex item seems to just shift to the side instead of wrapping.
.section-header {
border-top: 1px solid #eee;
//padding-bottom: 20px;
background: blue;
}
.section {
margin-top: 20px;
background: orange;
padding: 20px;
}
.desc-label {
padding-top: 10px;
flex: 1 0 100%;
height: 100px;
background: green;
}
.row {
width: 50%;
max-width: 700px;
margin: 0 auto;
display: flex;
//flex-direction: column;
//align-items: flex-start;
padding-top: 20px;
background: lightblue;
height: 400px;
}
.section-title {
flex: 1 0 100%;
height: 100px;
background: purple;
}<div class="section">
<div class="row section-header">
<div class="section-title">Engine</div>
<div class="desc-label">Template Element: Recipe Ingredient</div>
</div>
</div>