Tailwind flex-wrap自适应问题：Tooltip内容无法按需换行

问题根源 #

父组件外层容器仅设置了min-w-[25rem]，未配置最大宽度与自适应宽度规则，导致插槽所在的w-full容器宽度被限制在最小25rem，子组件中flex容器的max-w-[70rem]无法生效。同时子元素固定w-[26rem]，在父容器宽度不足时只能逐个换行。

解决方案 #

1. 调整父组件宽度约束

修改父组件外层div，添加max-w-[70rem]和w-fit，让容器自适应内容宽度直到达到最大值，同时给内容容器添加垂直滚动避免溢出：

<template>
    <div class="min-w-[25rem] max-w-[70rem] w-fit">
        <div class="w-full max-h-[24rem] px-24 py-24 overflow-y-auto">
            <slot name="content" />
        </div>
        <div class="py-16 px-24 flex gap-8 justify-between">
            <TertiaryButton @click="setDefaultValues" />
            <PrimaryButton @click="closeTooltip" />
        </div>
    </div>
</template>

2. 优化子组件Flex布局

移除flex容器的max-w-[70rem]（父组件已限制），给子元素设置flex-1 min-w-[26rem]，确保容器宽度足够时子元素填充空间，宽度不足时自动换行：

<template>
    <ParentComponent>
        <template #content>
            <div class="flex flex-wrap gap-4">
                <div v-for="(item, index) in items" :key="index" class="flex-1 min-w-[26rem] border rounded p-20">
                </div>
            </div>
        </template>
    </ParentComponent>
</template>

3. Grid布局替代方案

若偏好grid布局，子组件可使用自动填充列规则，配合父组件的宽度约束：

<template>
    <ParentComponent>
        <template #content>
            <div class="grid grid-cols-[repeat(auto-fill,minmax(26rem,1fr))] gap-4">
                <div v-for="(item, index) in items" :key="index" class="border rounded p-20">
                </div>
            </div>
        </template>
    </ParentComponent>
</template>

关键说明 #

• w-fit让Tooltip容器根据内容自动扩展宽度，直到触达max-w-[70rem]的上限
• flex-1 min-w-[26rem]保证子元素在容器宽度足够时均分空间，同时保留最小宽度，触发换行逻辑
• Grid的auto-fill + minmax规则会自动计算可容纳的列数，超出时自动换行

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