0

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>
lassej
  • 6,256
  • 6
  • 26
  • 34

0 Answers0