How to flex child elements to the height of their heighest sibling, inside a parent with overflow:scroll

Question

My inner divs .flex-el should be real 100% of the parent #wrapper which is influenced by a big inner div ".big-object".

When you scroll down, you'll see that the .flex-el has only 100% of the first visible div height, not of the complete container.

Is there a way to force the .flex-el to be always 100%?

Here´s the 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;
}

Sadly these two standard things are not possible because of the project setup:

• set a fix height to the ".flex-el"
• set ".flex-el" to position:absolute;

Answer 1

If you add separate wrapper for the scrolling you can have your content adjust to the height.

As you have a specified height for the #wrapperin your example and the .flex-el have their height set to 100% they will get the height of their parent, in this case 200px.

By separating the scroll wrapper from the content wrapper all the content elements should get the same height as their highest sibling.

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