Geek Answers Handbook

Difference in flexbox behavior between Chrome and Firefox

A sample can be found at http://jsfiddle.net/GGYtM/ , and here is the code as a string:

<html> <style type='text/css> .flex{ /* old syntax */ display: -webkit-box; display: -moz-box; /* new syntax */ display: -webkit-flex; display: -moz-flex; display: -o-flex; display: -ms-flex; display: flex; } .flex-direction-horizontal{ /* old syntax */ -webkit-box-orient: horizontal; -moz-box-orient: horizontal; /* new syntax */ -webkit-flex-direction:raw; -moz-flex-direction:raw; -o-flex-direction:raw; -ms-flex-direction:raw; flex-direction: raw; } .flex-cross-align-stretch{ /* old syntax */ -webkit-box-align:stretch; -moz-box-align:stretch; /* new syntax */ -webkit-align-items:stretch; -moz-align-items:stretch; -o-align-items:stretch; -ms-align-items:stretch; align-items:stretch; } .container{ border: 1px solid gray; padding:5px; background:#ecd953; -moz-border-radius: 5px; border-radius: 5px; } .button{ width:70px; height:50px; /*margin:5px;*/ background: #1b486f; color : white; position:relative; text-align:center; padding-top:5px; } .wrap{ margin:5px; } ​ </style> <body> <div class="flex flex-direction-horizontal flex-cross-align-stretch container" id='root'> <div class="wrap"> <div id="elem2" class="button"> <span id="txt">2</span> </div> </div> </div> </body> </html>

In firefox, the “root” div does not grow to fit the width of the parent, but it takes up the room needed to match the content — that's perfect. However, in Chrome and Safari, the “root” div grows to occupy the entire width of the parent container. What is the reason for this difference? Ideally, I would like to achieve FF behavior, it is perfect.

+6
source share
1 answer

You're using

 display: flex;

However, if you want it to not increase to fit the width of the parent element, but to occupy the room necessary to match the content, you should use

 display: inline-flex;

For older browsers you may need

 display: -moz-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; 

 .flex { /* old syntax */ display: -moz-box; display: -ms-inline-flexbox; /* new syntax */ display: -webkit-inline-flex; display: inline-flex; } .container { border: 1px solid gray; padding: 5px; background: #ecd953; -moz-border-radius: 5px; border-radius: 5px; } .button { width: 70px; height: 50px; background: #1b486f; color: white; position: relative; text-align: center; padding-top: 5px; } .wrap { margin: 5px; } 
 <div class="flex container"> <div class="wrap"> <div id="elem2" class="button"> <span id="txt">2</span> </div> </div> </div>
+2
source

More articles:


All Articles