Stop flex-grow div growing more than parent container

Question

I'm trying to add an Angular Material Expansion Panel with scrollable content within.

However, I have the expansion panel within a div which is in a flexbox container.

I want the expansion panel to fill the available space within the div but not expand it.

I've added overflow: auto to the div within the panel-content div so I can have the scrollable content within the panel.

But how do I get the div with a class of panel-content to fill the available space without increasing the parent div's height?

I know that the overall parent has a height of 400px but that is only for this example. That is likely to be 100% of the screen size so I can't manually set a height or max-height of the panel-content div. I just want it to fill the space automatically.

If you try my example you'll see the red div increase in size when the panel is expanded.

<div style="display: flex; flex-direction: column; height: 400px; background-color: black">
    <div style="height: 100px;background-color:blue; flex-shrink:0"></div>
    <div style="background-color:red; padding: 10px; flex-grow:1;">
    <mat-expansion-panel>
            <mat-expansion-panel-header>
                <mat-panel-title>
                    header
                </mat-panel-title>
            </mat-expansion-panel-header>
  
            <div class="panel-content" style=""> 
        <!-- I want this height to be the height of the available space. 
        If I set this to height: 200px you'll see the scrollable content working. -->


                <div style="height: 100%; overflow: auto">
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                    <div>1</div>
                </div>
            </div>
        </mat-expansion-panel>
    </div>
</div>

https://stackblitz.com/edit/angular-9-material-starter-cbiquu?file=src/app/app.component.html

Answer 1

In the panel-content you can set the following style:

max-height: 200px; overflow-y: scroll;

This will limit the height to 200px and enable the vertical scrolling if needed. I am not sure if that's the effect you were expecting but it's not expanding the red area in your fiddle.