css - 具有受限父容器的 flexbox 布局中的多个滚动 div？

Question

我正在尝试创建以下内容:一个包含 3 个 flex 盒子的 .mainFlex 容器。

• box1 永远不会很高。它不需要滚动、展开或收缩。假设它可以占据容器高度的 10%。
• box2 具有可变内容。如果它只有一两行，它应该只和该内容一样高。如果它有更多，它可能会扩展到 40% 的高度，为 box3 留下至少 50% 的容器高度。一旦达到容器高度的最大值 40%，溢出应该可以在 box2 上滚动。
• box3 应占父容器高度的 80%，最小 50%。溢出应该是可滚动的。

代码笔在这里: http://codepen.io/JWindels/pen/XbLLop

<div class="container"><div class="row"><div class="FCpanel"><div class="mainFlex col-xs-8"><div class="box1">This is some text</div><div class="box2">some text sdjks sjkhsdkjh sk  sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk</div><div class="box3">is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sd sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk s some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk s</div></div><div class="mainFlex col-xs-2 col-xs-offset-1"></div></div></div></div>

我的问题:
以百分比设置最大高度不会启用溢出:滚动功能。但是，如果我对 box2 和 box3 中的最大高度使用 em 测量值，我将面临 box3 中的内容超出父容器高度的风险，即使滚动也无法看到。

Answer 1

这似乎工作正常:

.FCpanel > .mainFlex > .box1 {
  max-height: 10%;
  overflow: auto;
}
.FCpanel > .mainFlex > .box2 {
  max-height: 40%;
  overflow: auto;
}
.FCpanel > .mainFlex > .box3 {
  flex: 1;
  overflow: auto;
}

.FCpanel {
  overflow: hidden;
  border-radius: 0.5em;
  margin-bottom: 1em;
}
.FCpanel > .mainFlex {
  background: #ebf6fd;
  box-shadow: 0em 0.125em 0.5875em #666;
  font-family: "OpenSans-Bold", "Open Sans", sans-serif;
  padding: 0px;
  border: solid 1px #428cca;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: stretch;
  height: 516px;
  color: #fff;
  font-size: 1.4em;
}
.FCpanel > .mainFlex > .box1 {
  max-height: 10%;
  overflow: auto;
  background-color: #f00;
}
.FCpanel > .mainFlex > .box2 {
  background-color: #0f0;
  max-height: 40%;
  overflow: auto;
}
.FCpanel > .mainFlex > .box3 {
  flex: 1;
  overflow: auto;
  background-color: #00f;
}

<div class="container">
  <div class="row">
    <div class="FCpanel">
      <div class="mainFlex col-xs-8">
        <div class="box1">This is some text</div>
        <div class="box2">some text sdjks sjkhsdkjh sk sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk</div>
        <div class="box3">is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sd sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text
          sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk s some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his
          is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk s</div>
      </div>
      <div class="mainFlex col-xs-2 col-xs-offset-1"></div>
    </div>
  </div>
</div>

基本上，height: auto; flex-basis: auto 使 box1 和 box2 与内容一样高。

然后 max-height 阻止它们增长太多。

注意 Flexbox 添加 auto 作为 min-height 的初始值，所以为了使 max-width 正常工作，你可以使用min-height: 0，或将 overflow 设置为 visible 以外的任何值，这使得 min-height: auto 行为像 min-height: 0。

在这种情况下，我使用 overflow: auto，它只会在必要时产生滚动条。

最后，将 flex: 1 设置为 box3 使其增长以填充剩余空间 (flex-grow: 1)，忽略其内容 (flex-basis : 0%).

请注意，盒子将具有默认的 flex-shrink: 1，但它们永远不会收缩，因为它们的高度不会大于 100%。如果您想确定，请随意设置 flex-shrink: 0。