Css 将元素高度限制为内容，并保持折叠溢出

我有一个弹出模式，它可以整体工作，但是一个烦恼是它有一个硬编码的

max height

，我想消除它

选项#1: 最初，我探索了如何在模式上使用

height:auto

，这样可以将模式高度保持在内容的自然高度。但是，当您将浏览器视口缩放到较短的高度时，这会影响模式的折叠模式溢出视口，而不仅仅是绿色图像区域溢出。

选项#2:我意识到

最大内容的可能性

（对于

高度

…甚至

最大高度

？），但我还没能让它在任何地方工作，而且它的浏览器支持不稳定

选项#3（当前）：将模式设置为

高度：100%

和

最大高度：500px

就足够了，但显然内容需要短于此

总的来说，要求如下：

在小屏幕中，模式应该随着绿色图像区域溢出而崩溃，从而保持模式标题和按钮在视图中

B-在大屏幕中，模式高度应仅与内容一样大

C-无论发生什么情况，模态都不应明显超过全局填充（2em）

请参见下面CSS中的

#modal

：

html，正文{
保证金：0；
填充：0；
身高：100%；
宽度：100%；
溢出：隐藏；
}
#应用程序{
背景颜色：灰色；
宽度：75%；
身高：75%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
溢出：隐藏；
填料：2米；
}
#容器{
身高：100%；
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#模态{
/*选项1*/
/*小屏幕故障：未调用绿色图像溢出*/
/*高度：自动*/
/*选项2*/
/*不工作*/
/*高度：最大含量*/
/*选项3*/
/*可以工作，但指定最大高度并不理想*/
身高：100%；
最大高度：500px；
宽度：自动；
位置：相对位置；
背景颜色：粉红色；
溢出：隐藏；
}
#莫代尔{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
身高：100%；
填料：2米；
框大小：边框框；
}
#形象{
溢出y：自动；
溢出x：隐藏；
弹性：1；
}
#形象，内心{
背景色：石灰；
填充：1em；
宽度：400px；
高度：200px；
}
#控制{
背景颜色：黄色；
显示器：flex；
证明内容：中心；
最大宽度：20em；
宽度：100%；
填充：1em；
边缘顶部：1米；
}
#cta{
背景色：白色；
显示器：flex；
证明内容：中心；
最大宽度：10em；
填充：1em；
边缘顶部：1米；
}

标题
形象
控制
提交

您几乎很好，使用

最大高度：100%

并添加

显示：flex

，这将提供

高度：100%

您试图在

模式内部实现的效果


html，正文{
保证金：0；
填充：0；
身高：100%；
宽度：100%；
溢出：隐藏；
}
#应用程序{
背景颜色：灰色；
宽度：75%；
身高：75%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
溢出：隐藏；
填料：2米；
}
#容器{
身高：100%；
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#模态{
最大高度：100%；
显示器：flex；
位置：相对位置；
背景颜色：粉红色；
溢出：隐藏；
}
#莫代尔{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
/*高度：100%；移除此*/
填料：2米；
框大小：边框框；
}
#形象{
溢出y：自动；
溢出x：隐藏；
弹性：1；
}
#形象，内心{
背景色：石灰；
填充：1em；
宽度：400px；
高度：200px；
}
#控制{
背景颜色：黄色；
显示器：flex；
证明内容：中心；
最大宽度：20em；
宽度：100%；
填充：1em；
边缘顶部：1米；
}
#cta{
背景色：白色；
显示器：flex；
证明内容：中心；
最大宽度：10em；
填充：1em；
边缘顶部：1米；
}

标题
形象
控制
提交
thx用于此；非常干净@MarsAndBack——我建议不要过度使用像
display:flex
这样的属性，将简单任务作为文本中心。它为浏览器启动了比必要时多得多的工作。例如，您的
submit
元素不需要。高度：100%的效果，你期待（当使用flexbox）在这里简要解释：你是对的；我会注意的。我经常本能地调用flex。