能否实现高度固定、宽度可随内容自适应的列流网格卡片布局？

DevOps 小满

2026-9-25

解决方案

该需求完全可行，现有代码调整如下即可实现预期效果：

核心问题修正点

外层容器错误使用纵向滚动属性，未强制卡片横向不换行
卡片配置了多余的内部横向滚动属性，未开启宽度自适应规则
卡片内部文本容器未限制高度，缺少宽度随内容自动扩容的逻辑

修正后代码

CSS部分

.testimonial-card {
  min-width: 350px;
  height: 280px;
  width: fit-content; /* 新增：宽度随内容自动调整 */
}
.testimonial-text {
  height: 100%;
  width: fit-content; /* 新增：文本容器宽度随内容自动扩容 */
  column-width: 300px; /* 可自定义调整单行列宽 */
  column-gap: 20px; /* 可自定义调整文本列间距 */
}

HTML部分

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<!-- 外层容器修改：替换overflow-y-scroll为overflow-x-auto，新增flex-nowrap -->
<div class="overflow-x-auto gap-10 pb-4 flex flex-row justify-start flex-nowrap">
  <div class="text-white bg-black border-white border rounded-xl p-8 testimonial-card">
    <!-- 内部布局修改：替换grid为flex纵向布局，自动分配空间 -->
    <div class="flex flex-col justify-between h-full gap-4">
      <div class="testimonial-text">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, sed quos laudantium modi dolorem id eum voluptatum veniam eveniet. （可加长文本测试自动扩容效果）
      </div>
      <div class="grid grid-flow-col items-center justify-start gap-4">
        <div class="bg-gray-200 h-12 w-12 rounded-full"></div>
        <div class="grid grid-flow-row items-center">
          <div>David</div>
          <div>United Kingdom</div>
        </div>
      </div>
    </div>
  </div>
  <!-- 其余重复卡片代码结构同上 -->
</div>