css - 如何在溢出 :scroll 的父级内部将子元素调整到其最高兄弟的高度

Question

我的内部 div .flex-el 应该是 真实 100% 的父 #wrapper ，它受到一个大内部 div 的影响“.大对象”。

向下滚动时，您会看到 .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”设置为position:absolute;

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