Geek Answers Handbook

Div width changes differently in Firefox and Chrome after resizing viewport

I noticed a slight difference after shrinking the viewport using a flexbox container-based layout. The following snippet contains several links inside two containers ( .container and .subcontainer ). In Chrome (45 beta), divs with the element class have the same width regardless of the size of the viewport. However, in Firefox (40), the width of each div changes depending on its content.

  html, body { margin: 0; padding: 0; } .container { position: relative; display: flex; flex-direction: column; width: 50%; } .element { flex: 1 0 0; padding: 0.5em; text-align: center; position: relative; background-color: red; margin-right: 1em; } .subcontainer { flex: 0 1 auto; display: flex; } .element a { color: black; } 
 <!DOCTYPE html> <html> <body> <div class="container"> <div class="subcontainer"> <div class="element"><a>abc</a> </div> <div class="element"><a>abcdef</a> </div> <div class="element"><a>abcdef</a> </div> </div> </div> </body> </html>

I think that the "Run code snippet" functionality does not allow me to see this change, so I provide a couple of gifs showing the difference:

Chrome:

enter image description here

Firefox:

enter image description here

As you can see, the boxes are the same width in Chrome, but Firefox limits the first box very much, and the rest of the blocks keep their proportions. What is the reason for this discrepancy and how can I fix it? I would like to have the same width for each box. That was the purpose of using flex: 1 0 0 in the first place.

thanks

+8
html css firefox google-chrome flexbox
source share
1 answer

Try setting min-width whatever value you need, or just 0px :

 .element { ... min-width: 0px; }

Fiddle

More details

For Firefox flex items, the default is min-width:min-content , as indicated here

These implementations, in which a slightly simpler behavior is implemented for this keyword: it is calculated on min-content on flex elements, and this evaluates to 0 for everything else.

So, if we set min-width:-webkit-min-content for Chrome, it will have the same unwanted behavior - jsfiddle .

+6
source share

More articles:


All Articles