html - 当 child 的高度预先未知时， parent child 的滚动条具有最大高度百分比

Question

我正在创建一个简单的弹出对话框。 parent 应该有 max-height: 90%。 parent 有两个 child 。第一个是带有 min-height: Xpx 的标题，第二个是应该填充其余空间(高度)的内容。如何描述限制内容高度以使内容具有滚动条的规则？

.parent {
    max-height: 90%;
}

.title {
    min-height: Xpx; /* title should be able to grow when needed*/
}

.content {
    overflow: auto;
}

<div class="parent">
    <div class="title">

    </div>
    <div class="content">

    </div>
</div>

Answer 1

您可以使用 flexbox 完成此操作。

.parent {
  display: flex;
  flex-direction: column; //set directon top to bottom
}

.content {
  flex: 1; //Takes up remaining space
  overflow: auto; //show scrollbar when content is overflowing
}

不要忘记供应商前缀。