display:flex not working in Chrome
Change your .row to:
.row {
display: inline-flex;
width: 100%;
}
You may also want to report this bug to team behind Chrome.
The problem is that you didn't clear the floats.
.header {
float: left;
width: 100%;
border: 1px solid #000;
}
.row {
display: flex;
}<div class="header">Header</div>
<div class="row">Content</div>
<div class="header">Header</div>
<div class="row">Content</div>
<div class="header">Header</div>
<div class="row">Content</div>
<div class="header">Header</div>
<div class="row">Content</div>Just add
.row {
clear: both;
}
.header {
float: left;
width: 100%;
border: 1px solid #000;
}
.row {
display: flex;
clear: both;
}<div class="header">Header</div>
<div class="row">Content</div>
<div class="header">Header</div>
<div class="row">Content</div>
<div class="header">Header</div>
<div class="row">Content</div>
<div class="header">Header</div>
<div class="row">Content</div>Use:
row {
display: flex;
flex-direction: row;
}