CSS：最大宽度为父级的 100%，没有高度，但最大高度

Question

我正在寻找纯 CSS 中有点奇怪的东西（如果可能的话）...

我有一个没有高度但有最大高度的模态，我有一个内容应该有一定的高度，但它应该是父级最大高度的 100%！

我不知道你是否真的明白我的意思，所以这是我正在尝试做的事情的示例：

#modal {
    height: auto;
    width: auto;
    max-height: calc(100vh - 50px);
    max-width: calc(100vw - 50px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid red;
    padding: 5px;
}

#modal-content {
    width: 700px;
    height: 700px;
    max-height: 100%; /* this should be 100% of the parent but don't work */
    border: 1px solid blue;
    padding: 5px;
}

<div id="modal">
    <div id="modal-content"></div>
</div>
 

如果你知道任何制作方法，我将不胜感激！

感谢您的帮助！

Answer 1

由于您明确将高度设置为 700px，这比它的父级大，所以 max-height 将不会按您的预期工作。

删除：

height: 700px;