I observed this issue specifically with Angular JS directive-elements, but here is a concise reproduction code:
Working code (the parent div width is set to 30rem) :
div {
display: flex;
padding-top: .5rem;
}
.parent {
flex: 0 0 30rem;
background-color: BlueViolet;
}
.child {
flex: 0 0 15rem;
background-color: DeepSkyBlue;
}
.text {
background-color: DarkOrange;
}<div>
<div class="parent">
<div class="child">
<span class="text">Dummy text</span>
</div>
</div>
</div>Non-working code (the parent div width does not remain at 30rem : it appears differently in Chrome & Firefox, and scales down to 15rem in IE11):
div {
display: flex;
padding-top: .5rem;
}
.parent {
flex: 0 0 30rem;
background-color: BlueViolet;
}
.child {
flex: 0 0 15rem;
background-color: DeepSkyBlue;
}
.text {
background-color: DarkOrange;
}<div>
<dummy-tag>
<div class="parent">
<div class="child">
<span class="text">Dummy text</span>
</div>
</div>
</dummy-tag>
</div>Could this potentially be a new bug related to flexbox ?