tailwind css 通过 flex-shrink 和 flex-grow 工具类来处理 flex 子元素溢出被撑开的问题。默认情况下，flex 子元素具有 flex-shrink: 1，这意味着当容器空间不足时，子元素会自动缩小以适应容器宽度。如果希望子元素保持其原始大小不被压缩，可以使用 shrink-0 类；如果希望子元素在空间充足时扩展填充剩余空间，可以使用 grow 类。
如何防止子元素在空间不足时被压缩？
要防止子元素在空间不足时被压缩，只需给该子元素添加 shrink-0 类即可。这会将 flex-shrink 属性设置为 0，从而保留子元素的原始尺寸。例如，在一个固定宽度的容器中，如果子元素的内容超出容器宽度，使用 shrink-0 可以确保子元素不会被压缩，而是可能产生溢出或滚动效果。
<div class="flex w-64 bg-gray-200"> <div class="w-32 bg-blue-500 shrink-0">Fixed Width</div> <div class="w-32 bg-red-500 shrink-0">Fixed Width</div> <div class="w-32 bg-green-500 shrink-0">Fixed Width</div> </div>
预期结果：三个子元素各自保持 128px（w-32）的宽度，总宽度为 384px，超过容器的 256px（w-64）。由于 shrink-0 的作用，子元素不会被压缩，可能会发生水平溢出。
立即学习“前端免费学习笔记（深入）”；
如何让子元素在空间充足时自动扩展？
要让子元素在空间充足时自动扩展以填充剩余空间，可以使用 grow 类。这会将 flex-grow 属性设置为 1，使子元素能够根据可用空间进行扩展。例如，在一个弹性容器中，如果子元素的内容较少，使用 grow 可以让子元素扩展以填满容器的剩余宽度。
<div class="flex w-full bg-gray-200"> <div class="bg-blue-500 grow">Expandable</div> <div class="bg-red-500 w-32 shrink-0">Fixed Width</div> </div>
预期结果：蓝色子元素会扩展以填充剩余空间，而红色子元素保持 128px 的固定宽度。如果容器宽度为 512px，蓝色子元素将占据 384px 的空间。
当子元素内容超出容器宽度时，Tailwind 如何处理？
当子元素内容超出容器宽度时，Tailwind CSS 默认会根据 flex-shrink 属性决定子元素是否被压缩。如果子元素没有设置 shrink-0，它会被压缩以适应容器宽度。如果设置了 shrink-0，子元素将保持其原始尺寸，可能导致溢出。可以通过结合 overflow-x-auto 类来实现水平滚动，以处理溢出情况。
<div class="flex w-64 overflow-x-auto bg-gray-200"> <div class="w-32 bg-blue-500 shrink-0">Fixed Width</div> <div class="w-32 bg-red-500 shrink-0">Fixed Width</div> <div class="w-32 bg-green-500 shrink-0">Fixed Width</div> </div>
预期结果：三个子元素各自保持 128px 的宽度，总宽度为 384px，超过容器的 256px。由于 overflow-x-auto 的作用，容器会出现水平滚动条，允许用户查看溢出的子元素。
