Tailwind CSS Flex布局下描述文本自动截断不生效问题求解

问题根因 #

Flex 布局下，flex 项默认 min-width 属性值为 auto，会自动适配内部内容的宽度。你的代码中右侧flex-auto的红色容器作为外层flex布局的子项，会被内部的长描述文本撑开，突破预期的宽度上限，导致内部设置的truncate类无法触发截断效果。

修改方法 #

给 <div class="bg-red-100 flex-auto"> 节点添加 min-w-0 Tailwind 工具类即可。

修改后的完整代码如下：

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>

<div class="flex bg-blue-100 h-screen">
  <div class="bg-green-100 w-16 flex-none">A</div>
  <div class="bg-blue-100 w-96 flex-none">SB</div>
  <div class="bg-red-100 flex-auto min-w-0">
    <div class="flex flex-col">
      <div class="flex flex-col space-y-2 bg-pink-100 p-3">
        <h1 class="bg-yellow-100">Title</h1>
        <h2 class="bg-yellow-200 truncate">Description: the text of this title should automatically truncate but it should never use more than 100% of the parent element</h2>
      </div>
      <div class="bg-pink-200 p-3">...</div>
    </div>
  </div>
</div>

min-w-0 会覆盖flex项默认的min-width: auto规则，让容器宽度始终限制在父元素分配的宽度范围内，内部的文本超出时就会正常触发truncate对应的截断效果。

内容的提问来源于stack exchange，提问作者Kai