tailwind-css - Tailwind css 固定宽度不适用于 flex 中的其他元素

Question

我必须并排放置两列。这些列之一具有固定宽度。我真的很想理解为什么一列中的固定宽度在 Tailwind CSS flexbox 上不起作用。

我有以下代码:

<div class="flex flex-row justify-between items-start shrink-0">
    <p class="mt-4 h-14 overflow-hidden leading-7">This title pushed back the next element</p>
    <div class="p-1 w-16 h-16 text-white text-center">
        <p class="text-sm">05</p>
        <p class="text-3xl leading-none font-bold">JUNE</p>
    </div>
</div>

顺风版本:3.0.23

输出:

检查元素:

预期输出:

Answer 1

实际上在使用 flex 时，如果没有明确指定响应式设计，它会自行收缩

请参阅 tailwind flex-shrink 文档 https://tailwindcss.com/docs/flex-shrink

它说使用 flex-shrink-0 css 属性即 shr​​ink-0 类来避免宽度因可变宽度大小而缩小。

所以代码应该是这样的:

<div className="flex flex-row justify-between items-start">
      <p className="mt-4 h-14  overflow-hidden leading-7">
        This title pushed back the next element and this is the long text to
        check the overflow of the text and lets see if this actually works
      </p>
      <div className="p-1 w-16 h-16 text-white text-center shrink-0 bg-purple-500">
        <p class="text-sm">JUN</p>
        <p class="text-3xl leading-none font-bold">05</p>
      </div>

输出如下: