如何使用所有可用高度保持这个可滚动的 div？答案

【问题标题】：How can I keep this scrollable div using all the available height?如何使用所有可用高度保持这个可滚动的 div？
【发布时间】：2022-01-26 05:45:18
【问题描述】：

时隔多年，我再次拿起网络，慢慢探索现在可用的东西，我创建了一个个人项目并制作了以下布局，在这个模型中进行了简化，它应该是一种形式单击按钮后，将可变数量的元素添加到结果容器 div 中：

<html>
<head>
    <style>
        .content {
            height: 300px;
            width: 300px;
            border: solid;
            display: flex;
            flex-direction: column;
        }
        
        .results-container {
            flex: 1;
            overflow:auto;
        }
    </style>
</head>
<body>
    <div class="content">
        <h1>Title</h1>
        <button>Button</button>
        <p>Result:</p>
        <div class="results-container">
            <p>A</p>
            <p>B</p>
            <p>C</p>
            <p>D</p>
            <p>A</p>
            <p>B</p>
            <p>C</p>
            <p>D</p>
        </div>
    </div>
</body>
</html>

这正是我想要的，所以我可以在这里停下来继续前进，但我想对这段代码做一个小改动：我想在结果容器 div 中移动“结果：”文本，同时保留布局工作方式相同。在这里我不知所措，我想我应该对结果容器 div 重复相同的布局，所以我添加了显示 flex 和那里的所有内容，同时为可滚动项添加了另一个容器，但此时容器似乎根据其内容调整大小，而不是使用父容器的可用空间，因此它会超出布局边界...

<html>
<head>
    <style>
        .content {
            height: 300px;
            width: 300px;
            border: solid;
            display: flex;
            flex-direction: column;
        }
        
        .results-container {
            flex: 1;
            
            display: flex;
            flex-direction: column;
        }
        
        .growing-list {
            flex: 1;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="content">
        <h1>Title</h1>
        <button>Button</button>
        <div class="results-container">
            <p>Result:</p>
            <div class="growing-list">
                <p>A</p>
                <p>B</p>
                <p>C</p>
                <p>D</p>
                <p>A</p>
                <p>B</p>
                <p>C</p>
                <p>D</p>
            </div>
        </div>
    </div>
</body>
</html>

我要进行此更改的原因是这实际上是一个 Angular 项目，结果容器 div 是一个不同的组件，我认为如果“结果：”文本是结果子的一部分会更有意义-component 而不是主页一。我有办法做到这一点吗？

【问题讨论】：

标签： html css layout

【解决方案1】：

我认为这完成了你所追求的？

更改了.growing-list 上的flex 属性
为<p> 添加了flex 属性

<html>
<head>
    <style>
        .content {
            height: 300px;
            width: 300px;
            border: solid;
            display: flex;
            flex-direction: column;
        }
        
        .results-container {
            flex: 1;
            
            display: flex;
            flex-direction: column;
        }
        
        .results-container p {
            flex: 0 0 auto;
        }
        
        .growing-list {
            flex: 1 0 0;
            overflow: auto;
        }
        
    </style>
</head>
<body>
    <div class="content">
        <h1>Title</h1>
        <button>Button</button>
        <div class="results-container">
            <p>Result:</p>
            <div class="growing-list">
                <p>A</p>
                <p>B</p>
                <p>C</p>
                <p>D</p>
                <p>A</p>
                <p>B</p>
                <p>C</p>
                <p>D</p>
            </div>
        </div>
    </div>
</body>
</html>

【讨论】：

是的，这太完美了！谢谢