容器可根据最大高度和最小高度自动调整高度

Question

我不明白为什么它不起作用。。也许我错过了css的一些基本功能(很抱歉(。我希望模态的最大高度为90vh，最小高度为50vh。内容可以更改。。当它不适合50vh时，容器会增长到最大90vh。如果内容也不适合90vh，我想要滚动条。在我的情况下，模态始终保持在50vh的高度，并且从未增长到90vh。感谢

<div className={styles.overlay}>
<div className={styles.modal}>
<div className={styles.inner}>
<div className={styles.header}>
<p>{title}</p>
</div>
<div className={styles.container}>
<div className={styles.titleWrapper}>
<h1>title</h1>
</div>
<div className={styles.appWrapper}>
{content &&
content.map((el: any, mainKey: number) => {
return (
<div key={mainKey} className={styles.app}>
something here
</div>
);
})}
</div>
<button className={styles.submitBtn}>ok</button>
</div>
</div>
</div>
</div>

我的CSS

.header {
width: 100%;
display: flex;
align-items: center;
text-align: center;
border-bottom: 1px solid var(--dark-grey);
padding: 16px 16px;
position: sticky;
top: 0;
background-color: var(--white);
z-index: 1;
}

.modal {
width: 680px;
max-height: 90vh;
position: absolute;
min-height: 40vh;
top: 0;
right: 0;
left: 0;
bottom: 0;
border: none;
background: rgb(255, 255, 255) none repeat scroll 0% 0%;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.16);
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.overlay {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 99;
}
.container {
padding: 32px 40px 40px 40px;
max-height: 100%;
}
.inner {
overflow-y: auto;
height: 100%;
}

编辑：我可能已经解决了。简化示例：

<div class="modal">
<div class="content">

</p> 
<p>text</p>
<p>text</p>
<p>text</p><p>text</p> 
</div>

</div>

css：

.modal {
width: 500px;
min-height: 40vh;
max-height: 90vh;
overflow: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border: 2px solid red;
}
.content {
height: 100%; 

}

编辑2：我的简单示例有效。。如果我对代码应用相同的逻辑，它就不起作用。。我听不懂

Answer 1

使用问题编辑中给出的简化示例，它似乎确实有效。

但是，如果您添加的bottom: 0存在于给定的原始代码中，那么它似乎优先于最大高度设置。

我不知道woulbottomd的优先级是多少加上最大身高/身高，但行为上似乎确实存在差异。

这是一个没有bottom: 0的片段

.modal {
width: 500px;
min-height: 10vh;
max-height: 90vh;
overflow: auto;
position: absolute;
top: 50%;
left: 50%;
right: 0;
/* bottom: 0; */
transform: translate(-50%,-50%);
border: 2px solid red;
margin: 0;
padding: 0;
}
.content {
height: 100%; 

}

<div class="modal">
<div class="content">
<p>text</p>
<p>text</p>
<p>text</p><p>text</p> 
<p>text</p>
<p>text</p>
<p>text</p><p>text</p> 
<p>text</p>
<p>text</p>
<p>text</p><p>text</p> 
<p>text</p>
<p>text</p>
<p>text</p><p>text</p> 
<p>text</p>
<p>text</p>
<p>text</p><p>text</p> 
<p>text</p>
<p>text</p>
<p>text</p><p>text</p> 
</div>

</div>

下面是bottom: 0;的一个片段

.modal {
width: 500px;
min-height: 10vh;
max-height: 90vh;
overflow: auto;
position: absolute;
top: 50%;
left: 50%;
right: 0;
bottom: 0;
transform: translate(-50%, -50%);
border: 2px solid red;
margin: 0;
padding: 0;
}
.content {
height: 100%;
}

<div class="modal">
<div class="content">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
</div>