如何使子div在容器滚动时使用所有可用的空间？

要使子div在容器滚动时使用所有可用的空间，可以使用CSS的flexbox布局来实现。

首先，需要将容器设置为一个具有固定高度和overflow属性为auto的元素，这样当内容超出容器高度时，会出现滚动条。

然后，在容器内部创建一个包含所有子div的父容器，并将其设置为display:flex，这样子div会自动填充父容器的所有可用空间。

接下来，为父容器设置flex-wrap属性为wrap，这样当子div的宽度超过父容器时，会自动换行显示。

最后，为子div设置flex属性为1，这样它们会根据可用空间自动调整宽度，并填充父容器的所有行。

以下是一个示例代码：

HTML:

<div class="container">
  <div class="flex-container">
    <div class="child">子div 1</div>
    <div class="child">子div 2</div>
    <div class="child">子div 3</div>
    ...
  </div>
</div>

CSS:

.container {
  height: 300px;
  overflow: auto;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 1;
}

这样，当子div的数量增加或内容超出容器高度时，子div会自动填充父容器的所有可用空间，并在容器滚动时正常显示。