本教程详细阐述了如何纯粹使用css，创建一个可滚动且不超出父容器边界的flex Wrap布局。核心解决方案在于结合父容器的position: relative与子容器的position: absolute、height: 100%、width: 100%及overflow: scroll属性。文章将通过代码示例，深入解析如何实现容器尺寸自适应、内容灵活包裹，同时严格遵守父级边距，且无需任何javaScript或硬编码尺寸，确保布局的响应性和可维护性。
解决Flex Wrap容器的边界与滚动问题
在Web开发中，我们经常会遇到需要在一个固定大小的区域内展示可变数量的元素，并且这些元素需要自动换行（flex-wrap）。然而，当使用display: flex和flex-wrap: wrap时，Flex容器可能会因为其内容的增长而超出其父容器的边界，同时又需要保持内部内容的可滚动性。更进一步的挑战在于，实现这一效果时，我们通常希望避免使用javascript来计算尺寸，也不希望对任何容器进行硬编码的尺寸设定，以确保布局的灵活性和响应性。
本教程旨在提供一个纯CSS的解决方案，满足以下核心目标：
- 实现可滚动性： 确保Flex容器内部的所有子元素（例如“白瓷砖”）都能通过滚动访问。
- 边界限制： Flex容器不应超出其父容器的边界，但应尽可能大，并尊重父容器设置的边距。
- 尺寸稳定性： Flex容器的尺寸应保持不变，无论其内部包含多少子元素。
- 无js限制： 不使用JavaScript进行任何尺寸计算。
- 无硬编码尺寸限制： 不对Flex容器或其任何包装器使用硬编码的像素或其他固定单位尺寸。
核心CSS解决方案
解决上述问题的关键在于巧妙地结合使用CSS的定位（position）属性、百分比尺寸以及溢出管理（overflow）属性。
立即学习“前端免费学习笔记（深入）”；
1. 父容器（Red Container）的设置
父容器需要建立一个定位上下文，以便其子元素可以相对于它进行绝对定位。
- position: relative;: 这是至关重要的一步，它将父容器设置为子容器绝对定位的参考点。
- height: 80vh; width: 100vw;: 这些属性定义了父容器的初始尺寸。使用视口单位（vh, vw）可以使其相对于视口大小进行响应式调整，而非硬编码固定值。
.red-container { background-color: red; height: 80vh; /* 示例：占据视口高度的80% */ width: 100vw; /* 示例：占据视口宽度的100% */ position: relative; /* 建立定位上下文 */ padding: 10px; /* 可选：为蓝色容器提供内部空间 */ }2. 子容器（Blue Container）的设置
子容器是实际的Flex Wrap容器，它需要填充父容器的可用空间，同时处理其内容的溢出。
- position: absolute;: 将子容器从正常的文档流中取出。这允许它相对于其最近的已定位祖先（即我们的红色父容器）进行定位和尺寸调整。
- top: 0; right: 0; bottom: 0; left: 0;: 配合position: absolute，这些属性将子容器拉伸，使其完全填充其定位上下文（即红色父容器）的可用空间。
- height: 100%; width: 100%;: 这些百分比尺寸是相对于其定位上下文（红色父容器）而言的，确保子容器始终占据父容器的全部高度和宽度。
- margin: 1vh;: 这个外边距将在height: 100%和width: 100%计算之后应用。这意味着蓝色容器会先尝试填充红色容器的100%，然后从这个100%的空间中向内收缩1vh的边距，从而确保它不会超出红色容器的边界，并尊重指定的边距。
- display: flex; flex-wrap: wrap;: 这些是使子元素在蓝色容器内自动换行并形成flex布局的关键属性。虽然position: absolute改变了蓝色容器本身的布局行为，但它仍然可以作为其内部子元素的Flex容器。
- overflow: scroll;: 当蓝色容器内部的Flex子元素因flex-wrap而超出蓝色容器的可用高度时，此属性将激活滚动条，确保所有内容都可访问。
.blue-container { background-color: blue; position: absolute; /* 绝对定位，相对于父容器 */ top: 0; right: 0; bottom: 0; left: 0; /* 使其完全填充父容器 */ height: 100%; /* 占据父容器的100%高度 */ width: 100%; /* 占据父容器的100%宽度 */ margin: 1vh; /* 在100%尺寸基础上向内收缩，尊重边距 */ display: flex; /* 启用Flex布局 */ flex-wrap: wrap; /* 允许子元素自动换行 */ overflow: scroll; /* 内容溢出时显示滚动条 */ gap: 10px; /* 可选：子元素之间的间距 */ padding: 10px; /* 可选：蓝色容器内部的内边距 */ }3. 子元素（White Tiles）的设置
子元素是Flex容器内的实际内容，它们将根据Flex布局规则进行排列。
- flex: 0 0 calc(33.33% – 20px);: 这是一个常用的Flex属性简写，表示：
- flex-grow: 0: 不允许增长。
- flex-shrink: 0: 不允许收缩。
- flex-basis: calc(33.33% – 20px): 初始尺寸为父容器宽度的约三分之一，减去边距和间隙，确保每行显示3个元素。
.white-tile { background-color: white; height: 100px; /* 示例：固定高度 */ flex: 0 0 calc(33.33% - 20px); /* 每行3个，减去间距 */ display: flex; justify-content: center; align-items: center; color: black; font-weight: bold; }完整示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Scrollable Flex Wrap Div</title> <style> body { margin: 0; font-family: sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f0f0; } .red-container { background-color: red; height: 80vh; /* 父容器高度，使用视口单位 */ width: 90vw; /* 父容器宽度，使用视口单位 */ position: relative; /* 建立定位上下文 */ box-sizing: border-box; /* 确保padding不增加总尺寸 */ } .blue-container { background-color: blue; position: absolute; /* 绝对定位，相对于父容器 */ top: 0; right: 0; bottom: 0; left: 0; /* 使其完全填充父容器 */ height: 100%; /* 占据父容器的100%高度 */ width: 100%; /* 占据父容器的100%宽度 */ margin: 1vh; /* 在100%尺寸基础上向内收缩，尊重边距 */ display: flex; /* 启用Flex布局 */ flex-wrap: wrap; /* 允许子元素自动换行 */ overflow: scroll; /* 内容溢出时显示滚动条 */ gap: 10px; /* 子元素之间的间距 */ padding: 10px; /* 蓝色容器内部的内边距 */ box-sizing: border-box; /* 确保padding不增加总尺寸 */ } .white-tile { background-color: white; height: 100px; /* 固定高度 */ flex: 0 0 calc(33.33% - 10px); /* 每行3个，减去gap */ display: flex; justify-content: center; align-items: center; color: black; font-weight: bold; box-sizing: border-box; } </style> </head> <body> <div class="red-container"> <div class="blue-container"> <div class="white-tile">Tile 1</div> <div class="white-tile">Tile 2</div> <div class="white-tile">Tile 3</div> <div class="white-tile">Tile 4</div> <div class="white-tile">Tile 5</div> <div class="white-tile">Tile 6</div> <div class="white-tile">Tile 7</div> <div class="white-tile">Tile 8</div> <div class="white-tile">Tile 9</div> <div class="white-tile">Tile 10</div> <div class="white-tile">Tile 11</div> <div class="white-tile">Tile 12</div> <div class="white-tile">Tile 13</div> <div class="white-tile">Tile 14</div> <div class="white-tile">Tile 15</div> <div class="white-tile">Tile 16</div> <div class="white-tile">Tile 17</div> <div class="white-tile">Tile 18</div> <div class="white-tile">Tile 19</div> <div class="white-tile">Tile 20</div> <!-- 可以添加更多Tile来测试滚动 --> </div> </div> </body> </html>注意事项与总结
- display: flex与position: absolute的共存： 尽管position: absolute会将元素从正常文档流中移除，但它并不妨碍该元素自身作为Flex容器管理其子元素。因此，display: flex和flex-wrap: wrap在蓝色容器上是完全有效的，用于控制其内部白色瓷砖的布局。
- margin与padding的应用： margin应用于position: absolute的元素时，会在其top/right/bottom/left定位之后，从其计算出的100%尺寸上向内收缩。这意味着margin会有效地缩小元素，使其在父容器内留出空隙。padding则是在元素内部创建空间，不会影响元素相对于父容器的定位和尺寸。
- box-sizing: border-box;： 建议在所有元素上使用box-sizing: border-box;。这可以确保padding和border不会增加元素的总宽度和高度，从而简化尺寸计算和布局管理。
- 性能与兼容性： position: absolute和overflow: scroll是广泛支持的css属性，在现代浏览器中具有良好的性能和兼容性。
- 无硬编码尺寸的优势： 通过使用百分比、视口单位和Flexbox的flex-basis与calc()函数，我们避免了任何硬编码的像素值，使得整个布局能够根据父容器和视口的变化而自适应调整，极大地提高了布局的响应性和可维护性。
通过上述CSS技术，我们成功构建了一个既能灵活包裹子元素，又能严格遵守父容器边界并支持内部内容滚动的Flex Wrap容器，且完全符合不使用JavaScript和不硬编码尺寸的严格要求。这种方法为构建复杂且响应式的ui提供了一个强大而简洁的解决方案。