Flexbox 列在 Childs 高度上拉伸？

Question

我正在尝试使用 flex box 构建一个布局，该布局需要是动态的才能用于某些用例。我有一个名为 .app-content-inside 的包装器，它使用 100% 的视口高度 - 标题和 100% 的视口 - 左侧的导航栏。到目前为止，这工作正常。

.app-body-inner {
  padding: 0 !important;
  position: relative;
  width: inherit;
  height: calc(100vh - 40px); /* changed for demo */
  overflow: hidden;
 }

我使用.nrow-col 类将弹性框列添加到某些div。如果在此 div 中存在另一个具有 .nrow-row 类的 flexbox 列子项，则应将其拉伸到剩余的垂直可用空间。

.nrow-col {
  display: flex;
  flex-direction: column;
  height: inherit;
}

.nrow-col > .nrow-row {
  flex: auto;
}

要添加弹性框行，我使用以下类：

.nrow-row {
  display: flex;
  flex-direction: row;
}

这适用于第一个实例，但如果我像这样使用 HTML，则内部 flexbox 列子不再被拉伸：

<div class="app-body-inner">
  <div class="nrow-col">
    <div class="p-a top">
      topbar
    </div>
    <div class="row no-gutter nrow-row">
      <div class="col-sm-2">
        <div class="nrow-col">
          <div class="p-a top">
            coltop
          </div>
          <div class="nrow-row">
            <div class="nrow-body">
              <div class="nrow-inner">
                /\<br>
                this should stretch between coltop and colbottom<br>
                \/
              </div>
            </div>
          </div>
          <div class="p-a bottom">
            colbottom
          </div>
        </div>
      </div>
      <div class="col-sm-10">
        <div class="nrow-col">
          <div class="p-a top">
            coltop
          </div>
          <div class="p-a top">
            coltop_another
          </div>
          <div class="row nrow-row">
            <div class="nrow-body">
              <div class="nrow-inner">
                /\<br>
                this should stretch between coltop_another and colbottom<br>
                \/
              </div>
            </div>
          </div>
          <div class="p-a bottom">
            colbottom
          </div>
        </div>
      </div>
    </div>
    <div class="p-a bottom">
      bottombar
    </div>
  </div>
</div>

将我的问题转化为文本确实非常困难，所以我创建了一个plunkr 来可视化我面临的问题......

也许有人可以帮助我

Answer 1

如果将嵌套的父容器变成弹性容器，它们会自动将align-items: stretch 应用到子容器，导致它们消耗所有可用高度。

以下是您需要添加的内容：

.col-sm-2, .col-sm-10 {
    display: flex;
}

revised demo