Should flex item overflow the flex container instead of breaking lines? - css

Question

I have this layout:
A row flex container with a definite size, e.g. width: 175px
A flex item
With an indefinite flex-basis, e.g. flex-basis: content
Which is inflexible, e.g. flex: none.
Whose max-content size is larger than the available space
Whose min-content size is smaller than the available space
.flex-container {
display: flex;
width: 175px;
border: 3px solid black;
margin-bottom: 10px;
}
.flex-item {
flex: none;
border: 3px solid blue;
margin: 3px;
}
.box {
display: inline-block;
vertical-align: middle;
width: 100px;
height: 100px;
border: 3px solid red;
margin: 3px;
}
<div class="flex-container">
<div class="flex-item">
<div class="box"></div>
<div class="box"></div>
</div>
</div>
As expected, Firefox breaks lines inside the flex item and sets its width to the available space.
However, Chrome doesn't break lines and thus the flex item overflows the flex container:
Who is right? How can I fix this?

Answer 1

This is what happens:
The Line Length Determination algorithm determines that the flex base size of the flex item is its max-content
Size the item into the available space using its used flex
basis in place of its main size, treating a value of
content as max-content. [...] The flex base size is
the item’s resulting main size.
Since there are no min nor max size constraints, the hypothetical main size of the flex item is the same value
The hypothetical main size is the item’s flex base size
clamped according to its min and max main size properties.
The Resolving Flexible Lengths algorithm freezes the inflexible flex item and sets its target main size to its hypothetical main size
Size inflexible items. Freeze, setting its target main size to its
hypothetical main size any item that has a flex factor of zero
Finally, the main size is that value too:
Set each item’s used main size to its target main size.
Therefore, your flex item should be sized as if it had flex-basis: max-content. Chrome, Edge and IE do it correctly.
Instead, Firefox seems to size as if it had flex-basis: fit-content. IMO this is more reasonable, but it's not standard. Bug 876985 should fix this.
Meanwhile, to achieve the standard behavior on Firefox you can use
flex-basis: -moz-max-content;
.flex-container {
display: flex;
width: 175px;
border: 3px solid black;
margin-bottom: 10px;
}
.flex-item {
flex: none;
flex-basis: -moz-max-content;
border: 3px solid blue;
margin: 3px;
}
.box {
display: inline-block;
vertical-align: middle;
width: 100px;
height: 100px;
border: 3px solid red;
margin: 3px;
}
<div class="flex-container">
<div class="flex-item">
<div class="box"></div>
<div class="box"></div>
</div>
</div>
Instead, if you want Firefox's behavior on other browsers, it's not that easy.
Chrome doesn't support fit-content on flex-basis, but it does on width (prefixed)
flex-basis: auto;
width: -webkit-fit-content;
width: fit-content;
.flex-container {
display: flex;
width: 175px;
border: 3px solid black;
margin-bottom: 10px;
}
.flex-item {
flex: none;
width: -webkit-fit-content;
width: fit-content;
border: 3px solid blue;
margin: 3px;
}
.box {
display: inline-block;
vertical-align: middle;
width: 100px;
height: 100px;
border: 3px solid red;
margin: 3px;
}
<div class="flex-container">
<div class="flex-item">
<div class="box"></div>
<div class="box"></div>
</div>
</div>
However, IE/Edge doesn't support fit-content anywhere. But a max constraint should work on all browsers
max-width: 100%;
box-sizing: border-box; /* Include paddings and borders */
Note the constraint won't include margins, so you may need to correct the percentage using calc, e.g. max-width: calc(100% - 6px).
.flex-container {
display: flex;
width: 175px;
border: 3px solid black;
margin-bottom: 10px;
}
.flex-item {
flex: none;
max-width: calc(100% - 6px);
box-sizing: border-box;
border: 3px solid blue;
margin: 3px;
}
.box {
display: inline-block;
vertical-align: middle;
width: 100px;
height: 100px;
border: 3px solid red;
margin: 3px;
}
<div class="flex-container">
<div class="flex-item">
<div class="box"></div>
<div class="box"></div>
</div>
</div>