如何限制Flex子项不溢出父容器，同时沿Flex主轴设置其固定尺寸？

嘿，我完全懂你遇到的这个头疼问题！咱们来一步步拆解：

你已经通过给<main>设置min-width: 0解决了容器横向滚动的基础问题，但.card的固定宽度被忽略，本质是因为flex容器的子项默认会启用flex-shrink: 1——也就是说，当父容器空间不足时，flex子项会自动收缩来适配，哪怕你给它设了固定宽度，这个收缩规则还是会生效。

要同时满足「固定card宽度」和「横向滚动」，只需要给.card加上flex-shrink: 0，强制它不允许收缩，这样它就会严格遵守你设置的width: 174px，当所有card总宽度超过<main>的可用宽度时，.cards容器的overflow: auto就会触发横向滚动。

下面是修改后的完整代码：

<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; width: 800px; }
header { background: #f88; padding: 0.5rem 1rem; }
footer { background: #8f8; padding: 0.5rem 1rem; }
.container { display: flex; }
.sidebar { background: #88f; padding: 0.5rem 1rem; width: 25%; max-width: 168px; }
main { min-width: 0; }
.cards { display: flex; flex-direction: row; overflow: auto; }
.card { 
  background: #888; 
  margin: 0.5rem 1rem; 
  padding: 8px; 
  width: 174px; 
  flex-shrink: 0; /* 关键新增属性 */
}
</style>
</head>
<body>
<div>
  <header>Header Content</header>
  <div class="container">
    <div class="sidebar">SideBar Content</div>
    <main>
      <div class="cards">
        <div class="card">
          <p>Title</p>
          <p>Description</p>
          <div>
            <button>Click</button>
          </div>
        </div>
        <div class="card">
          <p>Title</p>
          <p>Description</p>
          <div>
            <button>Click</button>
          </div>
        </div>
        <div class="card">
          <p>Title</p>
          <p>Description</p>
          <div>
            <button>Click</button>
          </div>
        </div>
        <div class="card">
          <p>Title</p>
          <p>Description</p>
          <div>
            <button>Click</button>
          </div>
        </div>
        <div class="card">
          <p>Title</p>
          <p>Description</p>
          <div>
            <button>Click</button>
          </div>
        </div>
        <div class="card">
          <p>Title</p>
          <p>Description</p>
          <div>
            <button>Click</button>
          </div>
        </div>
        <div class="card">
          <p>Title</p>
          <p>Description</p>
          <div>
            <button>Click</button>
          </div>
        </div>
        <div class="card">
          <p>Title</p>
          <p>Description</p>
          <div>
            <button>Click</button>
          </div>
        </div>
        <div class="card">
          <p>Title</p>
          <p>Description</p>
          <div>
            <button>Click</button>
          </div>
        </div>
      </div>
    </main>
  </div>
  <footer>Footer Content</footer>
</div>
</body>
</html>

关键知识点补充： #

• min-width: 0给<main>解除了flex容器的默认最小宽度限制（默认是内容宽度），让它能正确收缩到父容器分配的空间内
• flex-shrink: 0给.card禁用了收缩行为，确保它的固定宽度不会被flex布局的自适应规则覆盖
• .cards的overflow: auto会在总宽度超出时自动显示滚动条，同时不影响其他布局

内容来源于stack exchange