min-height不生效：元素高度取宽度值，求助修复（Vue3+Tailwind）

DevOps 小满

2026-7-23

问题：Swiper.js轮播组件中min-height不生效，如何实现「最小高度245px+高度自适应」？

问题详情

用Vue3+Tailwind做Swiper轮播，给轮播项加了min-h-[245px]但完全没效果。现在的轮播项代码是：

<div class="w-[300px] min-h-[245px] flex-shrink-0"></div>

实际情况是：旁边轮播项内容矮的时候，当前项高度会变成300px，根本不遵守245px的最小高度；我想要的是：内容少的时候保持245px高度，旁边项内容高的时候，当前项高度跟着撑起来。

问题出在Swiper的默认行为和样式冲突上，两步就能搞定：

给Swiper开自动高度适配
Swiper默认会把所有slide的高度统一成最高项的高度，还会给slide加height: 100%，直接覆盖你的min-height。所以初始化Swiper的时候要加autoHeight: true，让容器高度跟着当前活跃slide走：
```
new Swiper('.swiper', {
  // 你的其他配置（比如pagination、navigation）
  autoHeight: true,
})
```
给轮播项加h-auto样式
把原来的轮播项样式改成：
```
<div class="w-[300px] h-auto min-h-[245px] flex-shrink-0"></div>
```
h-auto会覆盖Swiper给slide自动加的height: 100%，这样你的min-h-[245px]就能正常生效了——内容高度不够245px时保持最小高度，内容更高或者旁边项拉高容器时，高度自动适配。