Html 父柔性柱中的柔性柱，高度设置为100%

我对flex column有意见，希望有人能给我指出正确的方向

我正在尝试创建一个带有页眉、正文和页脚的模态，这已经在弹性列中设置好了，允许正文分配模态中未使用的100%高度

在modal的主体中，我想添加另一个flex列，其中包含两个额外的div，一个用于搜索框，另一个用于可滚动内容

我知道我们可以将搜索栏移动到标题中，但整个想法是要有模态动态的主体，以允许不同类型的内容和其他/多个输入控件

然而，当试图在现有的高度为100%的柔性柱中添加柔性柱时，问题就出现了，它似乎不遵守规则。我已经添加了一个非常基本的JSFIDLE来发布当前的问题。有什么想法吗

.flex col{ 显示器：flex； 弯曲方向：立柱； } .h-100{ 身高：100%； } .莫代尔{ 高度：400px； 背景色：rgba240、240、240； } .身体{ 背景色：RGBA200200200； } .内容正文{ 溢出y：滚动； } 模态头 A. B C D E F G H 我 J K L M N o P Q R s T U v W x Y Z 关

---

将此添加到CSS文件：

html, body{
  height: 100%;
  margin: 0;
}

body > .modal{
  height: 100%;
}

---

我假设您希望动态增加高度

.h-100 {
   height: 100%;
 }
.modal {
   min-height:400px
 }

---

问题还不完全清楚。在Chrome中，小提琴似乎在做你想做的事情。请添加更多详细信息。