I noticed a small difference after reducing the viewport with a layout based on flexbox containers. The following snippet contains a few links inside two containers (.container
and .subcontainer
). In Chrome (45 beta), the divs with class element
have the same width regardless of the viewport dimension. 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 the "Run code snippet" functionality doesn't allow to see this change, so I provide a couple of gifs showing the difference:
Chrome:
Firefox:
As you can see, the boxes share the same width in Chrome, but Firefox constrains the first box quite noticeably and the other boxes keep their proportions. What is the reason of this discrepancy and how can I fix it? I'd like to have the same width for each box. That was the purpose of using flex: 1 0 0
in the first place.
Thanks