CSS 防止flex子项超出父容器高度，并使滚动条有效

在本文中，我们将介绍如何使用CSS防止flex子项超出父容器的高度，并且使滚动条能够正常工作。也就是说，当父容器的高度不足以容纳所有的flex子项时，我们可以通过添加滚动条来容纳剩余的子项，从而防止超出父容器的高度。

通常情况下，当我们将子项放置在使用display: flex的父容器中时，子项会自动根据父容器的高度和宽度进行排列和伸缩。然而，有时子项的高度可能会使其超过父容器的高度，这样就会导致溢出的现象。为了避免这种情况的发生，并且使滚动条能够正常工作，我们可以使用一些CSS技巧来限制子项的高度并启用滚动条。

阅读更多：CSS 教程

方法一：使用overflow属性

我们可以使用CSS的overflow属性来限制父容器的高度，并在超出限制时显示滚动条。具体来说，我们可以将父容器的overflow属性设置为auto或scroll，这样当子项的高度超过父容器时，会自动显示滚动条。

.parent-container {
  display: flex;
  flex-direction: column;
  overflow: auto;  /* 或者设置为overflow: scroll; */
  max-height: 200px;  /* 设置父容器的最大高度 */
}

上述代码中，我们将父容器的overflow属性设置为auto或scroll，这样当子项的高度超过父容器的高度时，就会自动显示滚动条。同时，我们还设置了父容器的最大高度为200px，这样当子项的高度超过这个值时，就会启用滚动条。

方法二：使用flex-grow属性

另一种方法是使用CSS的flex-grow属性来控制子项的高度。flex-grow属性定义了子项在剩余空间中的放大比例。默认情况下，flex子项的flex-grow属性值为0，这意味着它们不会增长以适应父容器的高度。

.parent-container {
  display: flex;
  flex-direction: column;
  max-height: 200px;  /* 设置父容器的最大高度 */
}

.child-item {
  flex-grow: 0;  /* 禁止子项增长 */
  overflow: auto;  /* 当子项高度超过父容器时显示滚动条 */
}

上述代码中，我们将父容器的flex-direction属性设置为column，这样子项会垂直排列。然后，我们设置父容器的最大高度为200px，并将子项的flex-grow属性设置为0，这样子项的高度就不会增长以适应父容器。最后，我们给子项添加overflow属性，当子项的高度超过父容器时，会自动显示滚动条。

示例说明

为了更好地理解上述方法，我们来看一个示例。假设我们有一个父容器，内部包含一些子项。父容器的高度为300px，而子项的高度为100px。我们希望当子项的高度超过父容器时，能够显示滚动条。

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

.parent-container {
  display: flex;
  flex-direction: column;
  overflow: auto;
  max-height: 300px;
}

.child-item {
  height: 100px;
}

在上述示例中，我们给父容器添加了class为parent-container的样式，并将其display属性设置为flex，flex-direction属性设置为column。此外，我们还设置了overflow属性为auto，max-height属性为300px，这样当子项的高度超过父容器时，就会显示滚动条。