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

I'm picking up web again after many many years, slowly exploring what is available to me nowadays, I created a personal project and made the following layout, simplified in this mock-up, it is supposed to be a form where once I click the button, a variable number of elements are added to the results-container 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 >
        <h1>Title</h1>
        <button>Button</button>
        <p>Result:</p>
        <div >
            <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>

It's exactly what I want, so I could stop here and move on, but I want to make one small change to this code: I want to move the "Result:" text inside the results-container div, while keeping the layout working the same way. Here I'm at a loss, I figured I should repeat the same layout to the results-container div, so I added the display flex and everything there, while adding another container for the scrollable items, but at this point the container seems to resize according to it's contents instead of using the available space of the parent container, so it grows past the layout boundaries...

<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 >
        <h1>Title</h1>
        <button>Button</button>
        <div >
            <p>Result:</p>
            <div >
                <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>

The reason I want to make this change is that this is actually an Angular project, the results-container div is a different component and I think it would make more sense if the "Result:" text was part of the results sub-component instead of the main page one. Is there a way for me to achieve this?

CodePudding user response：

I think this accomplishes what you're after ?

Changed the flex property on .growing-list
Added a flex property for the <p>

<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 >
        <h1>Title</h1>
        <button>Button</button>
        <div >
            <p>Result:</p>
            <div >
                <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>