如何用CSS实现屏幕缩放时子方块始终限制在父级大方块内

问题原因 #

1. 所有小盒子都设置了position: absolute，而父容器#Frame没有设置position: relative，导致小盒子的定位基准是浏览器视口而非父容器，自然无法被父容器边界限制
2. 小盒子写死了固定宽度，搭配百分比左侧边距，屏幕宽度缩小时，边距+盒子固定宽度的总尺寸很容易超过父容器的可用宽度，导致溢出、重叠
3. 绝对定位的元素脱离了正常文档流，父容器无法感知子元素的位置和尺寸变化，没法自动适配容纳子元素

修复方案 #

推荐用Flex弹性布局实现2行2列的排列效果，不需要写死定位，适配性更强，修改后的代码如下：

HTML代码（无需改动） #

<div id="Frame">
  <div id="box1">box1</div>
  <div id="box2">box2</div>
  <div id="box3">box3</div>
  <div id="box4">box4</div>
</div>

修改后的CSS代码 #

#Frame {
  background-color: pink;
  width: 90%;
  /* 高度用内边距撑开适配子元素，不需要写死 */
  padding: 20px 5%;
  margin: 0 auto;
  /* 开启flex布局，允许换行 */
  display: flex;
  flex-wrap: wrap;
  /* 子元素水平两端对齐，自动分配间距 */
  justify-content: space-between;
  /* 行间距 */
  row-gap: 30px;
  /* 内边距计入总宽度，避免尺寸溢出 */
  box-sizing: border-box;
  /* 可选：设置最小宽度，避免屏幕过窄时盒子被压得太小，不需要可以删掉 */
  min-width: 560px;
}

/* 公共样式抽离，避免每个盒子重复编写 */
#Frame > div {
  background-color: blue;
  width: 250px;
  height: 300px;
}

效果说明 #

父容器会自动容纳所有子元素，不会出现子元素溢出的问题，屏幕宽度足够时保持2行2列排列，宽度缩小时会自动调整子元素间距不会重叠。如果需要适配极窄屏幕，可以补充媒体查询，在屏幕宽度小于阈值时调整为1列居中排列即可。

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