Flexbox overflow hidden - css

Question

How can I achieve overflow hidden when using flexbox instead of floats?
My flex example on codepen: using flexbox
My float example on codepen, this is what I want but with flexbox: using floats

Answer 1

The problem is that flexbox will make the columns equal height or at least the largest will take precedence when expanding the parent.
So, we need to collapse the left div by effectively removing the content..and the easiest method for that is position:absolute.
So we wrap the content in an extra element inside the left div and position it as mentioned...then allow overflow scrolling as required.
img {
max-width: 100%;
}
.container {
display: flex;
width: 400px;
border: 5px solid blue;
}
.thumbs {
display: flex;
flex-direction: column;
flex: 1 0 26%;
border: 10px solid green;
position: relative;
overflow-Y: auto;
}
.wrap {
position: absolute;
top: 0;
}
.large {
flex: 1 1 auto;
border: 10px solid red;
}
<div class="container">
<div class="thumbs">
<div class="wrap">
<img src="http://lorempixel.com/image_output/food-q-c-700-700-8.jpg">
<img src="http://lorempixel.com/image_output/food-q-c-700-700-5.jpg">
<img src="http://lorempixel.com/image_output/food-q-c-700-700-4.jpg">
<img src="http://lorempixel.com/image_output/food-q-c-700-700-10.jpg">
<img src="http://lorempixel.com/image_output/food-q-c-700-700-10.jpg">
<img src="http://lorempixel.com/image_output/food-q-c-700-700-9.jpg">
</div>
</div>
<div class="large">
<img src="http://lorempixel.com/image_output/food-q-c-700-700-8.jpg">
</div>
</div>