Flexbox: Flex-shrink not working in nested flexbox elements

Question

I want to make the overflowing element to be shrink to make room for the right element,

that the right element can show within the max width and not wrapping.

Can you advise me how to do so, here is the tailwind example (original https://play.tailwindcss.com/VGndraNrCM), thanks!

    p {
      margin: 0;
    }
    .container{
      width: 100%;
      max-width: 1280px
    }
    .flex{
      display: flex
    }
    .max-w-full{
      max-width: 100%
    }
    .flex-shrink{
      flex-shrink: 1
    }
    .flex-grow{
      flex-grow: 1
    }
    .overflow-hidden{
      overflow: hidden
    }
    .overflow-x-auto{
      overflow-x: auto
    }
    .overflow-y-hidden{
      overflow-y: hidden
    }

<div class="flex container max-w-full">
  <div class="flex flex-shrink">
    <div>icon</div>
    <div>logo</div>
    <div class="flex flex-shrink overflow-hidden">
      <div>ToolTip</div>
      <div class="flex flex-shrink overflow-x-auto overflow-y-hidden">
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
      </div>
    </div>
  </div>
  <div class="flex-grow">
    <p>Right Element to be shown</p>
  </div>
</div>

Answer 1

There are 2 changes need to be made:

1. Give your .flex-shrink a min-width: 0. Since by default the min-width cannot be lower than min-content. That it will refuse to collapse while the available space is smaller than min-content.

2. Give your right most element a white-space: nowrap, which it will keep itself in a single line.

p {
  margin: 0;
}

.container {
  width: 100%;
  max-width: 1280px;
}

.flex {
  display: flex;
}

.max-w-full {
  max-width: 100%;
}

.flex-shrink {
  flex-shrink: 1;
  min-width: 0;
}

.flex-grow {
  flex-grow: 1;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.nowrap {
  white-space: nowrap;
}

<div class="flex container max-w-full">
  <div class="flex flex-shrink">
    <div>icon</div>
    <div>logo</div>
    <div class="flex flex-shrink overflow-hidden">
      <div>ToolTip</div>
      <div class="flex flex-shrink overflow-x-auto overflow-y-hidden">
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
        <p>Lorem </p>
      </div>
    </div>
  </div>
  <div class="flex-grow nowrap">
    <p>Right Element to be shown</p>
  </div>
</div>