display:flex not working in Chrome

Question

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?

Answer 1

Change your .row to:

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

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