如何使flex-wrap布局的div可滚动且不超出父容器边界？

可以通过纯CSS实现需求，无需JS计算或硬编码尺寸，修改后的代码如下：

.App {
  background: red;
  padding: 20px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box; /* 确保padding不会让容器超出视口 */
}

.container {
  background: blue;
  padding: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1; /* 让容器填充红色容器内的可用空间 */
  overflow-y: auto; /* 内容超出时垂直滚动 */
}

.tile {
  width: 100px;
  height: 100px;
  background: white;
}

关键修改说明： #

• 红色容器（.App）：

  • 添加display: flex和flex-direction: column，让子容器（蓝色）能自动填充可用空间；
  • 增加box-sizing: border-box，确保padding不会让红色容器超出视口高度（因为设置了height: 100vh）。

• 蓝色容器（.container）：

  • 添加flex: 1，使容器在红色容器的padding范围内最大化利用剩余空间，无需硬编码宽高；
  • 添加overflow-y: auto，当内部tile数量过多时，容器会出现垂直滚动条，保证所有tile都能被访问；
  • 容器尺寸由父容器的可用空间决定，不会随内部tile数量变化而改变。

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