Geek Answers Handbook

Display: flex does not work in Chrome

I use the following code to have two boxes next to 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 fine in Firefox, but I'm working on a mobile version of my site and added box-sizing:border-box; into your code. For some reason this messed up with flex, so in most cases I set box-sizing to content-box again, and that fixed it. However, I just realized that the code doesn’t work on Chrome, whether it’s desktop or mobile, whether my box-sizing lines exist or not, and I can’t understand what’s not working. The fact that I work on a mobile site, but something is not displayed using Chrome, really bothers me.

For a lively issue, the non box-sizing page is here , and (presumably) for mobile it is here .
Everything works fine in Firefox in both cases, and a preview in the browser in Firefox shows this for sure. Can someone help me figure out what happened?

+9
source share
3 answers

Change your .row to:

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

You can also report this error to the Chrome team.

+10
source

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

+1
source

The problem is that you did not 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>
0
source

More articles:


All Articles