可滚动div中的Flex高度错误答案

【问题标题】：Flex in scrollable div wrong height可滚动div中的Flex高度错误
【发布时间】：2018-04-24 04:21:11
【问题描述】：

我有这个包含 2 列的 flex 容器。某些列的内容大于容器高度，因此显示滚动条。没关系。

但是，当您向下滚动时，单列背景的高度仅与容器高度一样高，并且不会填满整个高度（低于顶部滚动位置）。

有没有办法解决这个问题，使黄色和绿色背景下降到列的底部？

这里是小提琴：

<div class="outer-container">
<div class="column-one">col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one</div>
<div class="column-two">col two</div>
</div>

.outer-container {
  border: 1px solid blue;
  height: 100px;
  overflow: auto;
  display: flex;
}

.column-one {
  flex: 0 0 auto;
  width: 80px;
  background: green;
}

.column-two {
  flex: 1 1 auto;
  background: yellow;
}

https://jsfiddle.net/ioma8/Lmo94q6q/4/

【问题讨论】：

标签： css flexbox

【解决方案1】：

只需在列和display周围添加另一个包装器作为flex：

.outer-container {
  border: 1px solid blue;
  height: 100px;
  overflow: auto;
  /*display: flex; not necessary*/
}

.flex-container {
  display: flex;
}

.column-one {
  flex: 0 0 80px;
  background: green;
}

.column-two {
  flex: 1 1 auto;
  background: yellow;
}

<div class="outer-container">
  <div class="flex-container">
    <div class="column-one">col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one</div>
    <div class="column-two">col two</div>
  </div>
</div>

之前，一切都按预期工作，flex-items 采用了 parent 元素的整个定义的height，这是他们默认所做的。因此，任何额外的内容都不会使它们高于它们的flex 父对象，并使它们在height 上保持相等。这就是为什么你需要overflow 父母，而不是孩子。这就是额外的 wrapper 背后的原因。

【讨论】：