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> <div>some content</div> <div>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?

3 Answers

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>Header</div> <div>Content</div> <div>Header</div> <div>Content</div> <div>Header</div> <div>Content</div> <div>Header</div> <div>Content</div>

Just add

.row { clear: both; } 

.header { float: left; width: 100%; border: 1px solid #000; } .row { display: flex; clear: both; }

<div>Header</div> <div>Content</div> <div>Header</div> <div>Content</div> <div>Header</div> <div>Content</div> <div>Header</div> <div>Content</div>

Use:

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