如何防止Div内元素溢出？实现方块自动列排列需求

嘿，我来帮你搞定这个学校项目的布局问题！你想要的效果是让红色方块在灰色容器里垂直排列，当一列填满容器高度后，自动从右侧新列的顶部继续往下排，对吧？目前的溢出问题是因为没有给容器设置合适的布局规则，下面给你两种简单有效的解决方案：

方法一：使用Flexbox（推荐） #

Flexbox是现在布局的首选方案，代码简洁且容易调整。只需要给.umbrella容器添加几个flex相关的属性，就能实现你要的效果：

.umbrella {
  width: 500px;
  height: 500px;
  background: grey;
  /* 核心属性 */
  display: flex;
  flex-direction: column; /* 让子元素垂直排列 */
  flex-wrap: wrap; /* 高度不够时自动换行到右侧新列 */
}

.square {
  background: red;
  width: 100px;
  height: 50px;
  margin: 5px;
}

原理说明： #

• display: flex把容器变成flex布局容器
• flex-direction: column指定子元素沿着垂直方向（从上到下）排列
• flex-wrap: wrap当容器的高度不足以容纳所有垂直排列的元素时，会自动将剩余元素放到右侧的新列中，并且从新列的顶部开始排列

如果觉得用margin控制间距不够方便，还可以把.square的margin去掉，给.umbrella加上gap: 5px，这样能更统一地控制方块之间的间距。

方法二：使用CSS多列布局 #

如果你更习惯用多列布局的方式，也可以通过columns属性来实现：

.umbrella {
  width: 500px;
  height: 500px;
  background: grey;
  /* 设置列宽为110px（方块宽度100px + 左右各5px的margin） */
  columns: 110px;
  column-gap: 0; /* 因为已经用了margin，所以列间距设为0避免重复 */
}

.square {
  background: red;
  width: 100px;
  height: 50px;
  margin: 5px;
  break-inside: avoid; /* 防止单个方块被拆分到两列中 */
}

原理说明： #

• columns属性定义了每一列的宽度，容器会自动计算能容纳多少列
• 元素会自动从上到下填满一列，然后跳到下一列的顶部继续排列
• break-inside: avoid是为了保证每个方块都是完整的，不会被列分割成两部分

这两种方法都能完美解决你的溢出问题，实现你想要的排列效果，你可以根据自己的习惯选择其中一种来用~

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