如何让容器随内部div自动扩展？Etch-a-Sketch开发问题

问题1：生成的div无法被容器完全容纳 #

原因分析 #

• 容器设置固定宽高700px，同时启用justify-content: center和align-items: center，导致子元素居中排列，无法填满容器空间。
• .squares的flex-grow: 1会强制子元素拉伸填充剩余空间，破坏了原本设置的40px固定尺寸；若子元素总尺寸超过容器固定宽高，还会出现溢出。

修改方案 #

1. 移除容器的justify-content: center和align-items: center属性，让子元素从容器左上角开始排列。
2. 移除.squares的flex-grow: 1属性，保留固定宽高，确保每个方块尺寸一致。

问题2：新增div时容器自动拉伸适配 #

原因分析 #

容器设置了固定宽高，无法随子元素数量变化自动调整尺寸，导致新增元素后要么溢出，要么容器留白。

修改方案 #

1. 移除容器的width: 700px和height: 700px属性，让容器尺寸由子元素总尺寸自动决定。
2. 保留flex-wrap: wrap确保子元素超出一行时自动换行。

优化方案（推荐用Grid实现规整网格） #

如果希望方块排列成规整网格，改用CSS Grid布局更简单，容器会自动根据子元素数量调整大小：

#container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 40px); /* 每行自动填充尽可能多的40px方块 */
}

.squares {
  height: 40px;
  width: 40px;
  padding: 10px;
}

修改后的完整CSS代码（Flex版本） #

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 1px solid red;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.squares {
  height: 40px;
  width: 40px;
  padding: 10px;
}

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