如何通过CSS按指定顺序实现元素收缩：优先让‘ChatGPT’文本收缩至0px

我明白你想要的效果——当容器宽度不够时，先让右侧的「ChatGPT」文本完全收缩消失，再让中间的标题「Airport Lost and Found」开始截断收缩。你之前尝试用flex-shrink:999没达到预期，是因为flex的收缩计算是结合flex-shrink和flex-basis的，单纯设大的flex-shrink值如果搭配不合理的flex-basis，不会按预期生效，另外还要确保文本容器能突破默认的最小宽度限制。

核心修改思路 #

Flex的收缩优先级由flex-shrink × flex-basis的比例决定，要让「ChatGPT」先收缩，我们需要：

1. 让「ChatGPT」所在的flex项拥有远高于标题容器的收缩权重
2. 允许「ChatGPT」文本突破默认最小宽度限制，能收缩到0
3. 确保标题容器的收缩优先级低于「ChatGPT」容器

修改后的完整代码 #

<div class="flex items-center gap-2 p-4 w-full">
  <button class="flex-shrink-0 rounded-full p-2 transition-colors hover:bg-white/10" title="Menu">
    <div class="w-4 h-4 bg-red-500 rounded"></div>
  </button>
  <!-- 中间标题容器：占据剩余空间，收缩权重为默认1 -->
  <div class="flex-1 min-w-0">
    <button class="flex w-full items-center rounded p-1.5 text-left transition-colors hover:bg-white/10">
      <div class="inline-flex max-w-full items-center">
        <span class="text-chatgpt-text mr-1 min-w-0 flex-shrink-1 truncate text-sm font-medium">Airport Lost and Found</span>
        <div class="w-3 h-3 bg-yellow-500 rounded flex-shrink-0"></div>
      </div>
    </button>
  </div>
  <!-- 右侧ChatGPT容器：设置极高收缩权重，优先被收缩 -->
  <div class="flex items-center gap-2 flex-shrink-[999] min-w-0">
    <button class="bg-chatgpt-input hover:bg-chatgpt-send-button-hover text-chatgpt-text flex items-center rounded-lg p-2 px-3 transition-colors min-w-0">
      <span class="mr-2 flex-shrink-0">
        <div class="bg-blue-500 relative h-6 w-6 overflow-hidden rounded-full"></div>
      </span>
      <!-- ChatGPT文本：允许收缩到0，截断优先级最高 -->
      <span class="mr-1 min-w-0 flex-shrink-[999] truncate text-base font-medium">ChatGPT</span>
      <div class="w-3 h-3 bg-green-500 rounded flex-shrink-0 ml-1"></div>
    </button>
    <button class="group relative rounded-full p-2 transition-colors hover:bg-white/10">
      <div class="w-4 h-4 bg-purple-500 rounded opacity-70 hover:opacity-100"></div>
      <span class="absolute -bottom-6 left-1/2 z-50 -translate-x-1/2 transform rounded bg-gray-800 px-2 py-0.5 text-xs whitespace-nowrap text-white opacity-0 transition-opacity group-hover:opacity-100">New chat</span>
    </button>
  </div>
</div>

关键修改点解释 #

1. 修复收缩权重比例问题
   去掉了你之前给ChatGPT容器设置的flex-basis:1px——这个设置会让收缩计算的权重变成999×1，远小于标题容器的1×内容宽度，这就是之前效果反向的核心原因。现在让ChatGPT容器的flex-basis使用默认的auto，收缩权重变成999×内容宽度，远高于标题容器的1×内容宽度，确保它先被收缩。

2. 突破最小宽度限制
   给中间标题容器、右侧ChatGPT容器、「ChatGPT」文本span都加上了min-w-0——默认块级/内联元素的min-width:auto会阻止它们收缩到小于内容宽度，这个属性是实现“收缩到0”的关键。

3. 明确文本的收缩优先级
   给「ChatGPT」文本span单独设置flex-shrink-[999]，确保在右侧容器内部，文本也是最先被收缩的对象，而不是旁边的图标。

这样修改后，当你缩小容器宽度时，会先看到「ChatGPT」文本逐渐被截断，直到完全消失，之后中间的标题才会开始收缩截断，完全符合你的预期。

内容来源于stack exchange