In the example below, the combination of flex-basis
and flex-shrink
adds a width to the .space
div
. But the width isn't used to calculate the width of the outer box (.parent
). Instead the content is truncated when used in combination with overflow: hidden
. Why is the width of the .space
tag discarded?
.root {
display: flex;
}
.parent {
display: flex;
overflow: hidden;
}
.parent > div {
display: flex;
}
.space {
flex-basis: 20px;
flex-shrink: 0;
}
<div class="root">
<div class="parent">
<div class="one">One</div>
<div class="space"></div>
<div class="two">Two</div>
</div>
</div>