如何使用所有可用高度保持此可滚动 div？

Question

时隔多年重拾网络，慢慢摸索现在能用到的东西，我创建了一个个人项目，做了如下布局，在这个模型中简化了，应该是一个单击按钮后，可变数量的元素将添加到结果容器 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>

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

<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 是一个不同的组件，我认为如果“结果：“文本是结果子组件的一部分，而不是主页的一部分。我有办法实现这个目标吗？

Answer 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>

如何使用所有可用高度保持此可滚动 div？

How can I keep this scrollable div using all the available height?

html

css

layout