Question

我的内部div .flex-el应该是真实的 100％的父#wrapper，它受到大内部div“.big-object”的影响。

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

有没有办法强迫.flex-el始终为100％？

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

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

1 个答案: