实现动态宽度父容器内横向滚动列表并保持子卡片尺寸

核心问题出在父容器的宽度控制和flex布局的默认行为上，调整以下CSS即可实现需求：

修改后的CSS代码 #

.site-container {
  max-width: 1200px;
}

body {
  background-color: gray;
}

.card {
  height: 114px;
  width: 164px;
  background-color: #eee;
  border: 2px solid white;
  border-radius: 8px;
  /* 强制卡片保持固定宽度，不被flex布局压缩 */
  flex-shrink: 0;
}

.card-list{
  display: flex;
  overflow-x: scroll;
  /* 给卡片添加间距，优化视觉效果 */
  gap: 8px;
}

.card-list::-webkit-scrollbar{
  display: none;
}

.vla {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-top:8px;
  margin-left: 25px;
  /* 关键：限制自身宽度为父容器可用宽度，防止内容撑开容器 */
  overflow: hidden;
  width: 100%;
}

.page-content-card {
  background-color: #ffffff;
  border-radius: 8px;
  margin-top: 8px;
  position: relative;
  height: 100%;
  width: 100%;
  padding: 16px;
  resize: horizontal;
  overflow: auto;
  max-height: fit-content;
  /* 移除max-width: fit-content，让容器宽度由父元素动态控制 */
}

.wrapper-big-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-top: 4px;
  width:100%;
}

.hover-wrapper {
  border-radius: 8px;
  padding: 8px;
}

.hover-wrapper:hover {
  background-color: #eee;
}

关键修改点说明 #

• 移除.page-content-card的max-width: fit-content：让容器宽度由父元素.site-container动态控制，不会被内部卡片列表撑开。
• 给.vla添加width: 100%和overflow: hidden：确保卡片列表的父容器宽度严格继承上层容器的可用宽度，超出部分隐藏，触发.card-list的横向滚动。
• 给.card添加flex-shrink: 0：强制卡片保持固定宽度，避免因flex布局的默认收缩特性被压缩。

修改后，当.page-content-card宽度动态变化时，只要卡片总宽度超过容器可用宽度，就会自动触发横向滚动，同时卡片始终保持固定尺寸。

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