高度设置为 100% 的父 flex 列中的 flex 列

Question

我遇到了 flex 列的问题，希望有人能指出我正确的方向。

我正在尝试创建一个带有页眉、正文和页脚的模态，它们已经设置在 flex 列中 - 它允许正文分配模态中未使用的 100% 的高度。

在模态框的主体内，我想添加另一个带有两个额外 div 的 flex 列，一个用于搜索框，另一个用于可滚动内容。

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

但是，当尝试在 100% 高度的现有 flex 列中添加 flex 列时出现问题，它似乎不遵守规则。我添加了一个非常基本的 JSFiddle 来解决手头的问题。有什么想法吗？

https://jsfiddle.net/zsgqc34o/1/

    .flex-col {
      display: flex;
      flex-direction: column;
    }
    
    .h-100 {
      height: 100%;
    }
    
    .modal {
      height: 400px;
      background-color: rgba(240, 240, 240);
    }
    
    .body {
      background-color: rgba(200, 200, 200);
    }
    
    .content-body {
      overflow-y: scroll;
    }

    <div class="modal flex-col" style="padding-right: 40px;"> <!-- added padding to see parent height/size -->
    
       <div class="header">
         <h1>
           Modal Header
         </h1>
       </div>
    
       <div class="body h-100 flex-col">
    
         <div class="content-header">
           <input placeholder="search" />
         </div>
         <div class="content-body h-100">
           <ul>
             <li>a</li>
             <li>b</li>
             <li>c</li>
             <li>d</li>
             <li>e</li>
             <li>f</li>
             <li>g</li>
             <li>h</li>
             <li>i</li>
             <li>j</li>
             <li>k</li>
             <li>l</li>
             <li>m</li>
             <li>n</li>
             <li>o</li>
             <li>p</li>
             <li>q</li>
             <li>r</li>
             <li>s</li>
             <li>t</li>
             <li>u</li>
             <li>v</li>
             <li>w</li>
             <li>x</li>
             <li>y</li>
             <li>z</li>
           </ul>
         </div>
    
       </div>
    
       <div class="footer">
         <button>
           close
         </button>
       </div>
    
     </div>

Answer 1

将此添加到您的 CSS 文件中：

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

body > .modal{
  height: 100%;
}

Answer 2

我假设你想动态增加高度

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