Flex Item

Let's begin with a simple example.

By default, flex items will have flex-grow: 0 and flex-shrink: 1 and flex-basis: auto.

Which means, the flex items will not grow and will shrink to fit the content.

Because flex-basis is auto, the size of the flex items will be the size of the content.

<div class="w-[120px] overflow-hidden border border-red-400 p-5">
  <div class="flex gap-4">
    <div class="w-6 h-6 bg-amber-200 inline-flex items-center justify-center">1</div>
    <div class="w-6 h-6 bg-green-200 inline-flex items-center justify-center">2</div>
  </div>
</div>

Both flex items want to take full width of the container which will cause the overflow.

If we set items to width: 100%,

Because flex-shink: 1 (default), they both shrink to fit the content.

<div class="w-[120px] overflow-hidden border border-red-400 p-5">
  <div class="flex gap-4">
    <div class="w-full h-6 bg-amber-200 inline-flex items-center justify-center">1</div>
    <div class="w-full h-6 bg-green-200 inline-flex items-center justify-center">2</div>
  </div>
</div>