在列内展开容器以适应引导网格中的列高答案

【问题标题】：Expand container inside column to fit column height in bootstrap grid在列内展开容器以适应引导网格中的列高
【发布时间】：2020-04-13 22:20:35
【问题描述】：

当我设置height: 100% 或h-100 时，为什么绿色容器会在蓝色列上展开？

我怎样才能使它刚好适合列的剩余高度？

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container" style="background-color: black">
  <div class="row">
    <div class="col-sm-6" style="background-color: red">
      <p>Some</p>
      <p>More</p>
      <p>Content</p>
      <p>Here</p>
    </div>
    <div class="col-sm-6" style="background-color: blue">
      <h3>Content I want to keep</h2>
      <section class="d-flex h-100" style="background-color: green">
        <button class="btn btn-danger m-auto">Centered Button</button>
      </section>
    </div>
  </div>
</div>

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4 flexbox

【解决方案1】：

如果我理解正确，您想将绿色块叠加到蓝色块中。

无法设置高度，因为两个块之间有文字（二）。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container" style="background-color: black">
  <div class="row">
    <div class="col-sm-6" style="background-color: red">
      <p>Some</p>
      <p>More</p>
      <p>Content</p>
      <p>Here</p>
    </div>
    <div class="col-sm-6" style="background-color: blue">
      <section class="d-flex h-100" style="background-color: green">
        <button class="btn btn-danger m-auto">Centered Button</button>
      </section>
    </div>
  </div>
</div>

【讨论】：

实际上，我想要Two 文本，并且容器应该扩展列的剩余高度。我通过将父容器盒模型设置为垂直方向来实现它的工作，但我想知道是否还有另一种方法