display:flex not working in Chrome

问题:

I am using the following code to have two boxes side by side of the same height:

<style>
.row {display:flex;}
.col {flex:1;}  
</style>

<div class="row">
  <div class="col content">some content</div>
  <div class="col content raw">some other content</div>
</div>

This worked perfectly in Firefox, but I'm working on the mobile version of my site and added box-sizing:border-box; to my code. This messed up with the flex for some reason, so I ended up setting box-sizing to content-box on most elements again and this fixed it. However, I just realized that the code doesn't work on Chrome, whether desktop or mobile, whether my box-sizing lines are there or not, and I can't figure out what isn't working. The fact that I'm working on a mobile site but that nothing shows up using Chrome really bothers me.

For the live problem, the page without the box-sizing is here and the (supposed to be) mobile-friendly one is here.
Everything works fine on Firefox in both, and the mobile preview on Firefox shows it perfectly too. Can anyone help me figure out what's wrong?

回答1:

Change your .row to:

.row {
    display: inline-flex;
    width: 100%;
}

You may also want to report this bug to team behind Chrome.

回答2:

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>

回答3:

Use:

row {
    display: flex;
    flex-direction: row;
}