Flexbox grow 容器增长到一定高度然后滚动

Question

如果我有一个包含 2 个垂直 div 的固定高度 div，我希望第一个 div 是内容的高度，最多为内容的 80% parent div，此时它的其余部分将滚动其内容。第二个 div 应该为父容器的其余部分增长，下降到最小高度。

我尝试了很多变体来让它做我想做的事，但我不知道如果没有 Javascript 怎么办。

我做了一个例子codepen供大家查看和修改。我知道我可以用 JS 做到这一点，但我想知道是否有没有办法做到这一点。

<body layout="row" ng-app="myApp" ng-cloak>

  <div flex layout="column" class="boxWithHeight" layout-padding>
    <section flex="grow" style="overflow-y:auto"><div>Enter in lots of content here</div></section>
    <section style="min-height:100px">flex</section>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script>
  <script>angular.module('myApp', ['ngMaterial'])</script>

</body>

Answer 1

我想这就是你想要的。

带溢出的演示

.wrap {
  height: 90vh;
  width: 90%;
  margin: 5vh auto;
  background: pink;
  display: flex;
  flex-direction: column;
}

.content {
  background: lightblue;
  max-height: 80%;
  overflow-y: auto;
}

.spacer {
  height: 200px; /* for demo purposes */
}

footer {
  flex: 1 0 auto;
  min-height: 50px;
  background: rebeccapurple;
}

<div class="wrap">
  <div class="content">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores, pariatur cumque? Accusantium eius hic laboriosam, odio amet repellendus quo perferendis unde iure quasi, eaque similique eos architecto illo voluptatibus voluptate doloribus atque
      in deleniti placeat corrupti saepe. Animi, quisquam officia?</p>
    <div class="spacer"></div>
  </div>
  <footer></footer>
</div>

没有溢出的演示

.wrap {
  height: 90vh;
  width: 90%;
  margin: 5vh auto;
  background: pink;
  display: flex;
  flex-direction: column;
}

.content {
  background: lightblue;
  max-height: 80%;
  overflow-y: auto;
}

.spacer {}

footer {
  flex: 1 0 auto;
  min-height: 50px;
  background: rebeccapurple;
}

<div class="wrap">
  <div class="content">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores, pariatur cumque? Accusantium eius hic laboriosam, odio amet repellendus quo perferendis unde iure quasi, eaque similique eos architecto illo voluptatibus voluptate doloribus atque
      in deleniti placeat corrupti saepe. Animi, quisquam officia?</p>
    <div class="spacer"></div>
  </div>
  <footer></footer>
</div>

Flexbox grow 容器增长到一定高度然后滚动

Flexbox grow container that grows to a certain height but then scrolls

html

css

overflow

flexbox