停止 flex-grow div 增长超过父容器

Question

我正在尝试添加一个带有可滚动内容的 Angular 材质扩展面板。

但是，我在一个 div 中有扩展面板，它位于一个 flexbox 容器中。

我希望扩展面板填充 div 中的可用空间，但不扩展它。

我在面板内容 div 中的 div 中添加了溢出：自动，因此我可以在面板中拥有可滚动的内容。

但是如何在不增加父 div 高度的情况下获得具有面板内容类的 div 来填充可用空间？

我知道整个父级的高度为 400 像素，但这仅适用于本示例。这可能是屏幕尺寸的 100%，所以我无法手动设置面板内容 div 的高度或最大高度。我只想让它自动填充空间。

如果您尝试我的示例，当面板展开时，您会看到红色 div 的大小增加。

<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

在panel-content中可以设置如下样式：

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

这会将高度限制为 200 像素，并在需要时启用垂直滚动。我不确定这是否是您所期望的效果，但它并没有扩大您小提琴中的红色区域。