Css 将子div max height与父div max height匹配

我有下面的代码，我不想修改包裹控件的最大高度

我希望有一种方法可以将内容高度与包装高度相匹配，这样我就可以滚动列表并保持标题静态

<div class='wrap'>
 <div class='content'>
        <div class="header">
            <h1>Header</h1>
        </div>
        <div class="list">
            <ul>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
            </ul>
        </div>
    </div>
</div>


h1
{
    background:green;
}

.wrap
{
    max-height:200px;
    overflow-y:scroll;
    background:blue;
}
.content
{
    background:red;
}

标题

项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目

h1
{
背景：绿色；
}
包
{
最大高度：200px；
溢出y：滚动；
背景：蓝色；
}
.内容
{
背景：红色；
}

---

这可以使用flexbox完成。在下面的示例中，请将

.wrap

div的

高度

更改为0到200px之间的任意数字，您可以看到内容动态调整为新高度

.wrap

现场示例：

h1
{
背景：绿色；
}
包
{
显示器：flex；
弯曲方向：立柱；
高度：150像素；
最大高度：200px；
背景：蓝色；
}
.内容
{
背景：红色；
柔性生长：1；
显示器：flex；
弯曲方向：立柱；
}
.名单{
溢出y：滚动；
柔性生长：1；
弹性基准：0；
}

标题

项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目

Ok学到了一些新东西。“最大高度”与我正在尝试的操作不匹配。我必须设定一个高度

下面的代码有效

标题


































html，正文，#内部{
}
#容器{
高度：150像素；
边框：4px红色实心；
填充底部：30px；
}
#内在的{
溢出y：滚动；
边框：4px蓝色实心；
边缘顶部：30px；
身高：100%
}
#头{
高度：30px；
边框：4px黄色实心；
位置：绝对位置；
}
#导航{
保证金：0；
边框：4px绿色实心；
}

差不多，但不完全一样。我不想在包裹上设置高度，只设置最大高度。我希望整个事情随着列表展开，直到它达到最大高度

<div id="container">
    <div id="head">header</div>
    <div id="inner">
        <ul id="nav">
            <li><a href="#">1</a>

            </li>
            <li><a href="#">2</a>

            </li>
            <li><a href="#">3</a>

            </li>
            <li><a href="#">4</a>

            </li>
            <li><a href="#">1</a>

            </li>
            <li><a href="#">2</a>

            </li>
            <li><a href="#">3</a>

            </li>
            <li><a href="#">4</a>

            </li>
            <li><a href="#">1</a>

            </li>
            <li><a href="#">2</a>

            </li>
            <li><a href="#">3</a>

            </li>
            <li><a href="#">4</a>

            </li>
            <li><a href="#">1</a>

            </li>
            <li><a href="#">2</a>

            </li>
            <li><a href="#">3</a>

            </li>
            <li><a href="#">4</a>

            </li>
        </ul>
    </div>
</div>

   html, body, #inner {
   }
   #container {
       height: 150px;
       border: 4px red solid;
       padding-bottom: 30px;
   }
   #inner {
       overflow-y:scroll;
       border: 4px blue solid;
       margin-top: 30px;
       height: 100%
   }
   #head {
       height:30px;
       border: 4px yellow solid;
       position: absolute;
   }
   #nav {
       margin: 0;
       border: 4px green solid;
   }