如何在具有溢出的父元素中将子元素弯曲到其最高兄弟元素的高度：滚动

Question

我的内部 div .flex-el 应该是 真实 100% 的父级 #wrapper 受一个大内部 div“.big-object”的影响。

当您向下滚动时，您会看到.flex-el 只有第一个可见 div 高度的 100%，而不是整个容器的高度。

有没有办法强制.flex-el 始终为 100%？

这是jsfiddle

<div id="wrapper">
    <div class="big-object"></div>
    <div class="flex-el"></div>
    <div class="flex-el"></div>
    <div class="flex-el"></div>
    <div class="flex-el"></div>
</div>


#wrapper {
    max-height: 200px;
    overflow:scroll;
    display: flex;
}
.big-object {
    height: 1000px;
    width: 20px;
}
.flex-el {
    flex: 1;
}

遗憾的是，由于项目设置，这两个标准的事情不可能：

• 为“.flex-el”设置一个固定高度
• 将“.flex-el”设置为位置：绝对；

Answer 1

如果您为滚动添加单独的包装器，您可以让您的内容调整到高度。

由于您在示例中为 #wrapper 指定了高度，并且 .flex-el 的高度设置为 100%，因此它们将获得其父级的高度，在本例中为 200px。

通过将滚动包装器与内容包装器分开，所有内容元素的高度都应与其最高兄弟元素的高度相同。

DEMO

HTML

<div id="scroll">
    <div id="wrapper">
        <div class="big-object"></div>
        <div class="flex-el"></div>
        <div class="flex-el"></div>
        <div class="flex-el"></div>
        <div class="flex-el"></div>
    </div>
</div>

CSS

#scroll {
    max-height:200px;
    overflow-x:hidden;
    border:1px solid #000;
}
#wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.big-object {
    height:1000px;
    width:20px;
    background: #c92828;
    background: -webkit-linear-gradient(#c92828 0%, #eade7e 100%);
    background: -moz-linear-gradient(#c92828 0%, #eade7e 100%);
    background: linear-gradient(#c92828 0%, #eade7e 100%);
}
.flex-el {
    border-right: 1px solid #e5e5e5;
    background:#f7f7f7;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}