Flex

弹性盒子允许在容器发生改变时自动改变容器内元素的大小。

容器

当使用 display: flex 或者 display: inline-flex 时，容器变成一个 Flex 容器。Flex 容器内的所有元素都会变成 Flex Items。

flex 的定义不是递归的。只有第一级子元素才会变成 Flex items。

Flex Item

Flex 容器内的元素会变成 Flex item。任何位于其中的 text 会被匿名 block 包裹，如果 text 只包含 whitespace（会被 white-space 属性影响）字符，则 flex 根本不会渲染它，这和为此匿名块设置了 display: none 效果相同。

flex item 的大小计算方式如下：

根据 flex-basis 计算元素的基本宽度。这个值默认为 auto，意为 flex item 的宽度。
计算 flex 容器的剩余宽度。
将剩余宽度分配到子元素上。

在存在剩余宽度的情况下，flex item 会分配得到多余的宽度。在不存在剩余宽度的情况下，flex 容器会发生溢出，要避免这种情况，可以将某个 flex item 的最小宽度设置为 0：

<div className='flex gap-2 justify-between w-full'>
  <div className="min-w-0">
    <div className="flex gap-2 items-center">
      <span
        className="whitespace-nowrap overflow-hidden text-ellipsis"
        title={message}
      >
        {message}
      </span>
      <Badge className="font-mono h-8">{oid.slice(0, 6)}</Badge>
    </div>
  </div>
  <div className='w-8 h-8'>
  </div>
</div>

如果 text 被深深嵌套在容器的内部，则只需要给最顶级元素设置 min-w-0。