Question

我试图建立一个带有弹性框的布局，需要动态才能用于某些用例。我有一个名为.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

如果将嵌套的父容器设置为flex容器，它们将自动将align-items: stretch应用于子容器，从而使它们占用所有可用高度。

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

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

revised demo

Flexbox列伸展在Childs高度？

1 个答案: