移动端如何使指定container div单独横向滚动而非整个wrapper？

桌面端时两个 .container 中的卡片显示为两行，所有元素包裹在 .wrapper 中；移动端（屏幕宽度<1128px）时显示第三个 .container.mobile，希望该容器内的卡片可横向滚动，但设置 overflow-x: scroll 无效，只能通过给 .wrapper 设置滚动实现近似效果。

问题核心在于你给 .container.mobile 设置了 width: max-content，导致容器宽度完全适配内部卡片总宽度，没有内容溢出，因此滚动条不会生效。调整样式即可实现目标：

• 移除 .container.mobile 的 width: max-content，让容器宽度默认撑满父级（.wrapper）
• 给 .container.mobile 添加 flex-wrap: nowrap，确保卡片不换行、超出容器宽度
• 给 .container.mobile 设置 overflow-x: scroll，开启横向滚动
• 可选：给 .wrapper 添加 overflow-x: hidden，避免页面整体出现横向滚动条

HTML #

<div class="wrapper">
  <h1>Some Random Header</h1>
  <div class="container">
    <div>Project One</div>
    <div>Project Two</div>
    <div>Project Three</div>
    <div>Project Four</div>
  </div>
  <div class="container">
    <div>Project Five</div>
    <div>Project Five</div>
    <div>Project Five</div>
    <div>Project Five</div>
  </div>
  <div class="container mobile">
    <div>Project One</div>
    <div>Project Two</div>
    <div>Project Three</div>
    <div>Project Four</div>
    <div>Project Five</div>
    <div>Project Five</div>
    <div>Project Five</div>
    <div>Project Five</div>
  </div>
</div>

CSS #

.wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  overflow-x: hidden; /* 可选，防止页面整体横向滚动 */
}

h1 {
  text-align: center;
  text-transform: uppercase;
}

.container {
  display: flex;
  gap: 2rem;
  justify-content: center;
}

.container div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 15rem;
  height: 15rem;
  border: 2px solid black;
  border-radius: 15px;
}

.container:first-of-type {
  margin-top: 3rem;
}

.container.mobile {
    display: none;
}

@media (max-width: 1128px) {
  .container {
    display: none;
  }
  
  .container.mobile {
    display: flex;
    flex-wrap: nowrap; /* 禁止卡片换行 */
    overflow-x: scroll; /* 开启横向滚动 */
    justify-content: flex-start; /* 替换原center，避免滚动时内容居中 */
  }
}

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