如何在父 div 元素中实现 flexbox？

Question

我想让我的页面适合屏幕高度，并在其中包含可滚动的内容，但我遇到了一个问题，由于我使用的框架（Nuxt & Buefy）生成了我无法完全做到这一点我无法控制的元素。

这就是我希望页面的样子

    html,
    body {
      height: 100%;
      margin: 0
    }
    .navbar {
      height: 65px;
      background: #dd7777
    }
    .box {
      display: flex;
      flex-flow: column;
      height: 100%;
    }

    .box .row {
      border: 1px dotted grey;
    }

    .box .row.header {
      flex: 0 1 auto;
    }

    .box .row.content {
      display: flex;
      flex-flow: column;
      flex: 1 1 auto;
      overflow-y: auto;
    }

    .box .row.footer {
      flex: 0 1 40px;
    }

<div class="auto-generated-top-elemennt">
      <div class="navbar">
      Something
      </div>
      <div class="main-content">
        <div class="box">
          <div class="row header">
            <p><b>header</b>
              <br />
              <br />(sized to content)</p>
          </div>
          <div class="row content">
            <p>
              <b>content</b> (fills remaining space)
            </p>
            <p>
              <b>content</b> (fills remaining space)
            </p>
            <p>
              <b>content</b> (fills remaining space)
            </p>
            <p>
              <b>content</b> (fills remaining space)
            </p>
            <p>
              <b>content</b> (fills remaining space)
            </p>
            <p>
              <b>content</b> (fills remaining space)
            </p>
            <p>
              <b>content</b> (fills remaining space)
            </p>
            <p>
              <b>content</b> (fills remaining space)
            </p>
          </div>
          <div class="row footer">
            <p><b>footer</b> (fixed height)</p>
          </div>
        </div>
      </div>
    </div>

我希望它看起来像similar to this solution，但不知何故它不能很好地工作..

Answer 1

你需要更多的弹性盒

body {
  height: 100vh;
  margin: 0
}
.auto-generated-top-elemennt {
  display:flex;
  flex-direction:column;
  height:100%;
}
.main-content,
.box{
  flex:1;
  display: flex;
  flex-flow: column;
  min-height:0;
}
.navbar {
  height: 65px;
  background: #dd7777
} 
.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
}

.box .row.content {
  display: flex;
  flex-flow: column;
  flex: 1 1 auto;
  overflow-y: auto;
}

.box .row.footer {
  flex: 0 1 40px;
}

<div class="auto-generated-top-elemennt">
  <div class="navbar">
    Something
  </div>
  <div class="main-content">
    <div class="box">
      <div class="row header">
        <p><b>header</b>
          <br />
          <br />(sized to content)</p>
      </div>
      <div class="row content">
        <p>
          <b>content</b> (fills remaining space)
        </p>
        <p>
          <b>content</b> (fills remaining space)
        </p>
        <p>
          <b>content</b> (fills remaining space)
        </p>
        <p>
          <b>content</b> (fills remaining space)
        </p>
        <p>
          <b>content</b> (fills remaining space)
        </p>
        <p>
          <b>content</b> (fills remaining space)
        </p>
        <p>
          <b>content</b> (fills remaining space)
        </p>
        <p>
          <b>content</b> (fills remaining space)
        </p>
      </div>
      <div class="row footer">
        <p><b>footer</b> (fixed height)</p>
      </div>
    </div>
  </div>
</div>