如何在Tailwind中修改flex-row布局下li元素的宽度？

我尝试了Tailwind文档里的各种方法，但始终没法修改列表中第一个li元素的宽度。

我的代码如下：

<section class="overflow-hidden">
        <ul class="bg-gray-200 flex flex-row items-center overflow-scroll w-full">
            <li class="bg-white px-4 text-left w-96">Why won't this thing change width?</li>
            <li class="px-4">Google</li>
            <li class="px-4">Microsoft</li>
            <li class="px-4">Netflix</li>
            <li class="px-4">Facebook</li>
            <li class="px-4">Marvel</li>
            <li class="px-4">Disney</li>
        </ul>
</section>

我已经给第一个li元素试过以下类：

• w-full
• w-screen
• w-96
• basis-1/2
• basis-full
• basis-80

问题根源在于flex容器的默认行为：当ul设置flex后，子元素li默认带有flex-shrink: 1属性，会自动缩小以适配容器宽度，导致你设置的宽度被覆盖。

直接解决方法是给第一个li添加flex-shrink-0类，禁用它的自动收缩特性，这样就能保持你设置的宽度。修改后的代码：

<section class="overflow-hidden">
        <ul class="bg-gray-200 flex flex-row items-center overflow-scroll w-full">
            <li class="bg-white px-4 text-left w-96 flex-shrink-0">Why won't this thing change width?</li>
            <li class="px-4">Google</li>
            <li class="px-4">Microsoft</li>
            <li class="px-4">Netflix</li>
            <li class="px-4">Facebook</li>
            <li class="px-4">Marvel</li>
            <li class="px-4">Disney</li>
        </ul>
</section>

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