html - 使 div 垂直适合父 div，其中一个有滚动条

Question

我希望容器内有两个 div 垂直填充以填充父容器，而不会从底部溢出。

<div class="modal-body">
  <div class="parent-container">
    <div class="div1" style="height:auto;width:100%;">
      <span style="width:100%;">
        <div class="td-div">Header Test 1</div>
        <div class="td-div">Header Test 12</div>
        <div class="td-div">Header Test 1 3</div>
        <div class="td-div">Header Test 14</div>
        <div class="td-div">Header Test 15</div>
      </span>
    </div>
    <div class="div2" style="width:100%;overflow-y:auto;">
        <div class="blue-row" style= "width:100%;">
          <span style="width:100%;display:inline-block">
            <div class="td-div">TEst1 testing seeing what happens when its long</div>
            <div class="td-div">Test2</div>
            <div class="td-div">Test 3 3</div>
            <div class="td-div">Test 4</div>
            <div class="td-div">T e s t 5</div>
          </span>
        </div>
        <div class="blue-row" style="width:100%;"> 
          <span style="width:100%;display:inline-block">
            <div class="td-div">TEst1 testing seeing what happens when its long</div>
            <div class="td-div">Test2</div>
            <div class="td-div">Test 3 3</div>
            <div class="td-div">Test 4</div>
            <div class="td-div">T e s t 5</div>
          </span>
        </div>
    </div>
  </div>
</div>

下面的链接是我遇到的实际问题，使用了更多的 CSS 以便更容易区分。

http://jsfiddle.net/8sdLe2pu/12/

问题是类“div2”的 div 溢出了父容器的底部。它应该填充容器中剩余的任何空间(标题不占用的空间)并且应该有一个滚动条以便能够查看其余内容。

我希望它看起来像下面的这个例子，除了它应该垂直填充它的容器，并且不应该在类为“div2”的 div 上使用硬编码的百分比。

http://jsfiddle.net/8sdLe2pu/10/

它看起来应该与上面类似，除了带滚动条的 div 下方不应有红色空间 (div2)。它应该自动填充父容器而不会溢出。

所以，我的问题是，是否可以让子 div 像 JSFiddle 示例编号 10 中那样具有滚动条，同时让它填充父级而不溢出，并且不使用硬编码 %高度。

我不想使用硬编码的 % 高度，因为无论屏幕大小如何，它都应该能够始终填充父容器，并且父容器使用 vh 作为它的高度。

Answer 1

这是我使用 flexbox 的解决方案。

*{
  box-sizing:border-box;
}
.modal-body{
  height:65vh;
  background:red;
}
.parent-container{
  width:100%; height:100%;   
  display:flex;
  align-items:stretch;
  flex-direction:column;
}
.div1{
  background:green;
}
.div2{
  flex:1;
  background:blue;
}
.div1 span{
  display:table;
}
.div1 span div{
  display:table-cell;
  width:20%;
  padding:1em;
  vertical-align:middle;
}

div.blue-row span{
  display:table;
  width:100%;
}
div.blue-row span div{
  display:table-cell;
  width:20%;
  padding:1em;
  vertical-align:middle;
}

工作演示可以在这里找到http://jsfiddle.net/pulamc/x8xw2hLg/