使子div用滚动填充父div

要使子 div 使用滚动条填充父 div，你需要设置一些CSS样式来确保子 div 的高度适应父 div 的高度，并且在内容超出时显示滚动条。以下是实现这一效果的基础概念和相关步骤：

基础概念

父容器：这是包含子元素的容器。
子元素：这是需要滚动条填充父容器的元素。
CSS Flexbox：一种布局模型，用于在一维空间内排列元素。
CSS Overflow：用于控制内容溢出元素框时的显示方式。

类型

垂直滚动条：当内容高度超过容器高度时显示。
水平滚动条：当内容宽度超过容器宽度时显示。

应用场景

长列表或表格：如新闻列表、商品列表等。
代码编辑器：需要显示大量代码的场景。
数据可视化工具：展示大量数据的图表或仪表板。

示例代码

以下是一个简单的HTML和CSS示例，展示了如何使子 div 使用滚动条填充父 div：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scrollable Child Div</title>
    <style>
        .parent-div {
            height: 300px; /* 设置父容器的高度 */
            width: 500px; /* 设置父容器的宽度 */
            border: 1px solid #ccc;
            display: flex;
            flex-direction: column;
        }

        .child-div {
            flex: 1; /* 使子元素填充剩余空间 */
            overflow-y: auto; /* 当内容超出时显示垂直滚动条 */
            padding: 10px;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <div class="parent-div">
        <div class="child-div">
            <!-- 这里放置大量内容 -->
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
            <!-- 添加更多段落以测试滚动效果 -->
        </div>
    </div>
</body>
</html>