Microsoft Edge browser breaks nested flex children
The solution to this problem is actually quite simple. The explanation, however, not so much.
Solution
Don't use unitless values on flex-basis
. It breaks flex layouts in Microsoft browsers (IE and Edge).
Instead of this, which you have in your code:
.box > * {
flex-basis: 0;
}
Use this:
.box > * {
flex-basis: 0%;
}
That solves the problem.
.box {
display: flex;
flex-wrap: wrap;
}
.box>* {
flex-basis: 0%; /* adjustment */
flex-grow: 1;
max-width: 100%;
}
.box>.concise {
flex-basis: auto;
flex-grow: 0;
}
section {
background-color: white;
border: 1px solid black;
}
<div class="box">
<section class="box concise">
<div class="box">
this is just for test
</div>
</section>
</div>
Explanation
According to the flexbox specification, there should be no problem using unitless values with the flex-basis
property.
However, in reality, IE and Edge have a problem rendering such values.
The problem is explored in these posts:
- Image behavior within flexbox (rows embedded in columns)
- flex property not working in IE
- Why does shorthand flex property behave differently than long hand properties in IE?
- Understanding unit-less flex-basis
Therefore, as a safe cross-browser alternative that works in IE and Edge, don't use unitless values on flex-basis
. This applies to both flex-basis
as a long-hand property and as a component of the flex
property.