Question

我有这个包含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/

Answer 1

只需在列周围添加另一个包装，并将display添加为flex：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

之前，一切按预期工作， flex-items 默认采用父元素的整个定义height，这就是他们所做的。因此，任何额外内容都不会使更高比 flex父更高并使它们在 height 中保持相同。这就是为什么你需要overflow 父，而不是孩子。这是附加包装背后的原因。

在可滚动div中弯曲错误的高度

1 个答案: