CSS Flexbox | 子项目被推出包含 div（屏幕外）

在本文中，我们将介绍 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS Flexbox 中的一个常见问题：当子项目的大小超过包含它的 div 的尺寸时，其它子项目被推出包含 div 的范围，造成显示不完整或遗漏的情况。我们将提供解决方法和示例来解决这个问题。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

问题描述

在使用 Flexbox 布局时，我们通常将父容器设置为 display: flex，然后子项目（图像、文本等）将自动排列在一行或一列中。然而，当一个子项目的大小超过了包含它的 div 的尺寸时，其他子项目就会被推出 div 的范围，导致在页面上无法完整显示所有子项目。

例如，考虑下面的 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">HTML 和 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 代码：

<div class="parent">
  <div class="child">子项目1</div>
  <div class="child">子项目2</div>
  <div class="child">子项目3</div>
  <div class="child">子项目4</div>
  <div class="child">子项目5</div>
</div>

.parent {
  display: flex;
  width: 400px;
  height: 200px;
  border: 1px solid black;
}

.child {
  flex: 1;
  border: 1px solid red;
}

在上面的示例中，我们将 .parent 设置为 display: flex，并且其宽度为 400px，高度为 200px。每个子项目（.child）都有相同的 flex: 1 属性，使它们平均分配剩余空间。但是，当子项目的内容超过了 .parent 的宽度时，被推出了 div 的范围。

解决方法

要解决这个问题，我们可以使用 CSS 属性 overflow、flex-wrap 或 min-width 来控制子项目在容器内的显示方式。

1. 使用 overflow: auto

将 .parent 的 CSS 样式修改如下：

.parent {
  display: flex;
  width: 400px;
  height: 200px;
  border: 1px solid black;
  overflow: auto;
}

此样式将会为 .parent 创建一个滚动条。当子项目的大小超出了容器的尺寸时，滚动条将出现，用户可以通过滚动条来查看超出范围的内容。

2. 使用 flex-wrap: wrap

将 .parent 的 CSS 样式修改如下：

.parent {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  height: 200px;
  border: 1px solid black;
}

此样式将会让子项目进行换行，超出容器的子项目将自动移到下一行来显示。

3. 使用 min-width

将 .child 的 CSS 样式修改如下：

.child {
  flex: 1;
  border: 1px solid red;
  min-width: 0;
}

在默认情况下，.child 的尺寸会根据其内容进行自动调整。通过添加 min-width: 0 样式，我们可以防止子项目自动扩展超出容器的范围，保持它们在容器内的显示。

示例

在上述解决方案中，我们将采用第三种方法来解决子项目被推出容器的问题。我们将修改之前的示例代码，加入 min-width 属性。

.parent {
  display: flex;
  width: 400px;
  height: 200px;
  border: 1px solid black;
}

.child {
  flex: 1;
  border: 1px solid red;
  min-width: 0;
}

在这个示例中，我们使用了相同的 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">HTML 结构。通过为子项目（.child）添加 min-width: 0 样式，超出容器宽度的子项目将会被限制在容器内显示，并且在容器中平均分配剩余的空间。

确保你的浏览器支持 Flexbox 属性，并在浏览器中运行上述示例代码，你将看到子项目不再被推出容器，而是在容器内正常显示。

总结

在本文中，我们解决了 CSS Flexbox 中子项目被推出包含 div（屏幕外）的问题。我们介绍了使用 overflow、flex-wrap 和 min-width 属性来控制子项目在容器内的显示方式。我们通过修改示例代码，并使用 min-width 属性来解决此问题。通过采用这些解决方法，我们可以确保子项目不会被推出容器，而是在容器内正常显示。

现在，你可以在自己的项目中应用这些解决方法，确保灵活的布局和完整的显示效果。希望本文对你的学习和实践有所帮助！