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?
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 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;
}
