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 #wrapper
in 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.
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;
}