css - 将子 div 最大高度与父 div 最大高度匹配

Question

我有下面的代码，我不想修改 wrap control 的 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;
}

http://jsfiddle.net/jz89u91s/

Answer 1

这可以使用 flexbox 来完成。在下面的示例中，请将 .wrap div 的 height 更改为 0 到 200px 之间的任意数字，您可以看到内容会动态调整到新的高度.wrap.

的

实例:

h1
{
    background:green;
}

.wrap
{
    display: flex;
    flex-direction: column;
    height: 150px;
    max-height:200px;
    background:blue;
}
.content
{
    background:red;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.list {
    overflow-y:scroll;
    flex-grow: 1;
    flex-basis: 0;
}

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