Question

我正在尝试创建一个可滚动的flex-child，其高度取决于其flex-grow属性。

示例：

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.heading {
  background: #9D8189;
  flex: 0 0 auto;
  padding: 2rem;
  min-height: 10rem;
}

.content {
  background: #FFE5D9;
  flex: 1 0 auto;
  padding: 2rem;
  /* Makes it scrollable but breaks the flexbox layout */
  max-height: 40vh;
  overflow: scroll;
}

.box {
  background: #D8E2DC;
  padding: 7rem;
}

<body>
  <div class="container">
    <div class="heading">heading</div>
    <div class="content">
      <div class="box">box1</div>
      <div class="box">box2</div>
      <div class="box">box3</div>
    </div>
  </div>
</body>

（jsfiddle）

布局由flex-parent .container和两个flex-children组成：

.heading，其高度由padding和min-height和
.content，应该占据.heading后的所有剩余空间。为此，第一个flex-child（.heading）具有flex: 0 0 auto，第二个flex-child（.content）具有flex: 1 0 auto。

但是，我也希望.content里面有可滚动的内容。目前，我唯一能做到的是强制.content具有一定的高度（例如，通过max-height，如我在提供的示例中将其设置为{{1} }。但是，尽管它使其可滚动，但它也破坏了flexbox的布局，其中40vh的高度是content高度减去parent的高度。

似乎一旦我指定了heading的高度，它就会停止遵守flexbox的布局，这是有道理的。但是还有其他方法可以使其在保持其高度（由flexbox布局定义）的同时滚动吗？

Answer 1

height:100%要求计算父级已知的height，除非元素本身是HTML。您需要：html, body, {height:100%}，因此.container {height:100%}的含义是，height的值将从HTML（浏览器的窗口）继承，然后由BODY继承，最后是{{1} }。

.container也可以代替VH使其变得简单。

%应该设置为.container，以允许子级一旦达到父级的限制就可以滚动。

代码示例：

overflow:hidden

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;/* update */
  overflow:hidden;/* update */
}

.heading {
  background: #9D8189;
  /*flex: 0 0 auto; */
  padding: 2rem;
  min-height: 10rem;/* if needed */
}

.content {
  background: #FFE5D9;
  flex: 1 ;/* make it simple */
  padding: 2rem;
  overflow: auto;/* scroll if needed */
}

.box {
  background: #D8E2DC;
  padding: 7rem;
}

Answer 2

将min-height: 0设置为。content类样式，它应该可以按预期工作

具有flex-grow 1的可滚动flex子元素

2 个答案: