如何让子Div被垂直自增长的父Div包裹，同时为固定尺寸的 testimonial 卡片添加内容垂直滚动条？

嘿，我来帮你搞定这个问题！你想要的效果是让每个 testimonial 卡片保持固定的宽高，当内容区域的文字过多时，只在内容块里显示垂直滚动条，而不会撑大整个卡片对吧？这只需要调整几处 CSS 就能实现，我给你一步步拆解：

第一步：给 testimonial 卡片设置固定尺寸 #

首先要确保每个卡片的宽高是固定的，不会被内部内容撑开。同时用 box-sizing: border-box 让内边距不会额外增加卡片尺寸：

.testimony {
  /* 这里的宽高你可以根据自己的需求调整 */
  width: 320px;
  height: 290px;
  padding: 1.2rem;
  box-sizing: border-box;
  /* 可选：加个边框或阴影让卡片更显眼 */
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

第二步：用 Flex 布局分配卡片内部空间 #

给卡片开启 Flex 垂直布局，让内部的标题、内容、客户信息等元素合理分配空间，这样内容区域能自动填充剩余高度：

.testimony {
  /* 接上面的样式，添加 Flex 布局 */
  display: flex;
  flex-direction: column;
  gap: 0.8rem; /* 给内部元素之间加一点间距，看起来更舒服 */
}

第三步：让内容区域支持垂直滚动 #

给 .content 设置 flex: 1 让它占据卡片剩余的可用高度，再开启垂直滚动，这样内容超出时就会自动显示滚动条：

.content {
  flex: 1;
  /* 垂直方向溢出时显示滚动条，水平方向隐藏溢出 */
  overflow-y: auto;
  /* 可选：给内容加一点内边距，避免文字贴边 */
  padding: 0.6rem;
  /* 可选：自定义滚动条样式，让它更美观（适配不同浏览器） */
  scrollbar-width: thin;
}

/* 针对 Chrome、Edge 等 WebKit 内核浏览器的滚动条样式 */
.content::-webkit-scrollbar {
  width: 6px;
}
.content::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 3px;
}
.content::-webkit-scrollbar-thumb {
  background: #cccccc;
  border-radius: 3px;
}
.content::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

第四步：调整父容器样式（适配横向滚动） #

如果你需要横向滚动展示这些卡片，调整 .testimony-container 的样式，确保它能横向排列卡片并支持滚动：

.testimony-container {
  display: flex;
  gap: 1.5rem; /* 卡片之间的间距 */
  overflow-x: auto;
  /* 去掉原来的 overflow: hidden，避免遮挡横向滚动 */
}

drag-scroll {
  height: 300px;
  width: 100%;
  display: block;
}

这样设置之后，每个 testimonial 卡片就会保持固定的宽高，内容区域如果文字过多，只会在自己的范围内显示垂直滚动条，完全不会撑大整个卡片，完美符合你的需求~

备注：内容来源于stack exchange，提问作者Sam K