Menu
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
278
Using width, max-width and margin: auto; Then, you can set the margins to auto, to horizontally center the element within its container. The element will take up the specified width, and the remaining space will be split equally between the two margins: This <div> element has a width of 500px, and margin set to auto.
To convert it to a fixed-width layout, simply add a fixed with to the #wrapper and set the margins to auto. Setting the margins to auto will cause the left and right margins to be equal no matter how wide the browser window is, which will cause your fixed-width layout to be positioned in the center of the browser.
When an element has auto as a value for width, it can have margin, padding, and border without becoming bigger than its parent element. The width of its content box will be the content itself with the subtraction of margin, padding, and border.
The width property in CSS specifies the width of the element's content area. This “content” area is the portion inside the padding, border, and margin of an element (the box model). In the example above, elements that have a class name of . wrap will be 80% as wide as their parent element.
Try to set min-width to any value you need, or just 0px:
.element
{
...
min-width: 0px;
}
Fiddle
Details
For Firefox flex items has min-width:min-content by default, as pointed here
These implementations where implementing a slightly simpler behavior for this keyword: it computed to min-content on flex items, and it computes to 0 on everything else.
So, if we set min-width:-webkit-min-content for Chrome, it will have the same unwanted behaviour - jsfiddle.
109
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
