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-0css 属性 ie shrink-0class 来避免宽度因宽度尺寸可变而缩小。

所以代码应该是这样的：

<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>

输出如下：

Answer 2

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