本教程旨在解决如何在不使用javascript或硬编码尺寸的情况下，创建一个既能容纳弹性布局（flex-wrap）子元素、又能自身滚动，并严格限定在父容器边界内且保持固定尺寸的css容器。核心方案利用了父元素的相对定位与子元素的绝对定位，配合视口单位和偏移量实现尺寸自适应，并通过`overflow: scroll`实现内容滚动，同时确保弹性子元素的正确布局。
引言：弹性布局容器的常见挑战
在Web开发中，我们经常遇到需要创建一个容器，使其内部元素能够弹性布局并自动换行，同时该容器自身又能保持固定尺寸并可滚动，且严格限制在父容器的边界内。更具挑战性的是，这些需求往往需要避免使用JavaScript进行尺寸计算，也不能对容器的尺寸进行硬编码。
具体来说，我们的目标是实现以下几点：
- 蓝色容器可滚动： 确保所有白色子元素都能通过滚动被访问到。
- 蓝色容器不超出红色父容器边界： 蓝色容器应尽可能大，但必须完全包含在红色父容器内部，并留出指定的边距。
- 蓝色容器尺寸固定： 无论内部包含多少白色子元素，蓝色容器的尺寸都应保持不变。
- 弹性换行： 蓝色容器内的白色子元素应能弹性换行排列。
核心限制： 禁止使用JavaScript计算任何尺寸，禁止对蓝色容器或其任何包装器进行硬编码尺寸。
核心原理与解决方案
要解决上述挑战，我们需要巧妙地结合CSS的定位（Positioning）、弹性布局（Flexbox）和溢出处理（Overflow）属性。
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
立即学习“前端免费学习笔记（深入）”；
1. 容器尺寸与边界约束
实现蓝色容器固定尺寸、不超出父容器且自适应边距的关键在于 position: relative 和 position: absolute 的组合。
-
父容器 (.red-container)： 父容器必须设置 position: relative。这为其绝对定位的子元素提供了一个定位上下文。子元素会相对于这个带有 position: relative 的父元素进行定位和尺寸计算。同时，父容器需要有明确的尺寸定义，例如使用视口单位（vh, vw）或百分比，作为子容器尺寸的参照基准。
.red-container { background-color: red; height: 80vh; /* 设置父容器高度为视口高度的80% */ width: 90vw; /* 设置父容器宽度为视口宽度的90% */ position: relative; /* 关键：为绝对定位的子元素提供定位上下文 */ } -
子容器 (.blue-container)： 子容器设置 position: absolute，使其脱离文档流。通过结合 top, bottom, left, right 属性，我们可以精确地定义其相对于父容器的偏移量，从而间接确定其尺寸，并实现“留出边距”的需求。
例如，要使蓝色容器在父容器内部留出 1vh 的边距，并填充剩余空间，应使用 top: 1vh; bottom: 1vh; left: 1vh; right: 1vh;。
为什么不使用 height: 100%; width: 100%; margin: 1vh;？ 如果一个绝对定位的元素设置了 height: 100%; width: 100%;，它将填充整个父容器的可用空间。在此基础上再添加 margin: 1vh;，这个外边距会作用在 100% 尺寸 之外，导致蓝色容器的实际尺寸变成 100% + 2vh （高度和宽度），从而超出父容器的边界。
而 top: 1vh; bottom: 1vh; left: 1vh; right: 1vh; 的方法，则是直接定义了蓝色容器的四个边界距离父容器边缘的距离。这样，蓝色容器的实际宽度将是 父容器宽度 - (left + right)，高度将是 父容器高度 - (top + bottom)，完美地实现了在父容器内留出指定边距并填充剩余空间的效果，同时避免了尺寸溢出。
.blue-container { position: absolute; /* 关键：脱离文档流，实现精确尺寸和定位 */ top: 1vh; /* 距离父容器顶部1vh */ left: 1vh; /* 距离父容器左侧1vh */ right: 1vh; /* 距离父容器右侧1vh */ bottom:
