Flex Item Truncate

First, look at this example:

<div class="w-[400px]">
  <div class="flex">
    <div class="mr-2">123</div>
    <div class="flex-1">
      <div class="inline-flex max-w-full">
        <div class="w-fit max-w-full">
          <button class="w-full">
            <span>
              <div class="flex items-center">
                <div class="flex-1 truncate">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Quisquam, quos.
                </div>
              </div>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div>123</div>
  </div>
</div>

How to make the text truncate when the container width is limited?

<div class="w-[400px]">
  <div class="flex">
    <div class="mr-2">123</div>
    <div class="flex-1 max-w-full">
      <div class="inline-flex max-w-full">
        <div class="w-fit max-w-full">
          <button class="w-full">
            <span>
              <div class="flex items-center">
                <div class="flex-1 truncate">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Quisquam, quos.
                </div>
              </div>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div>123</div>
  </div>
</div>

<div class="w-[400px]">
  <div class="flex">
    <div class="mr-2">123</div>
    <div class="flex-1 min-w-0">
      <div class="inline-flex max-w-full">
        <div class="w-fit max-w-full">
          <button class="w-full">
            <span>
              <div class="flex items-center">
                <div class="flex-1 truncate">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Quisquam, quos.
                </div>
              </div>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div>123</div>
  </div>
</div>

Another situation

<div class="w-[400px]">
  <div class="flex">
    <div class="mr-2">123</div>
    <div class="flex-1 min-w-0">
      <div class="inline-flex max-w-full">
        <div class="w-fit max-w-full">
          <button class="inline-flex w-full">
            <span>
              <div class="flex items-center">
                <div class="flex-1 truncate">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Quisquam, quos.
                </div>
              </div>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div>123</div>
  </div>
</div>

We need to set min-width to 0.

<div class="w-[400px]">
  <div class="flex">
    <div class="mr-2">123</div>
    <div class="flex-1 min-w-0">
      <div class="inline-flex max-w-full">
        <div class="w-fit max-w-full">
          <button class="inline-flex w-full">
            <span class="min-w-0">
              <div class="flex items-center">
                <div class="flex-1 truncate">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Quisquam, quos.
                </div>
              </div>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div>123</div>
  </div>
</div>