CSS Flexbox aspect ratio images

Question

I am trying to learn how to use Flexbox. I have a page with two images, separated by a stripe in the middle, stacked from top to bottom. I want the panel to remain the same size, regardless of how the browser and two images change when the browser is compressed (preserving the original image size if there is extra space. I apply this via max-height on the containing divs). I can get images for resizing in height, but the width will not change to maintain aspect ratio.

I have read a couple of similar questions and guides, but I cannot apply their solutions according to my scenario. This solution seems to be closest to my needs: http://goo.gl/iE6Wbh

Here is what I still have. I don't know why this makes the content scroll through the coden code ... http://codepen.io/anon/pen/VLvxgo

<style> #container { width: 100%; height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; } .topbottom { flex: 3; display: flex; } .topbottom.top { max-height: 93px; } .topbottom.bottom { max-height: 152px; } .topbottom > img { width: auto; height: 100%; } #dividerbar { background-color: blue; width: 100%; height: 50px; margin: 20px 0; } </style> <div id="container"> <div class="topbottom top"><img src="http://placekitten.com/g/200/93" /></div> <div id="dividerbar">Hello world</div> <div class="topbottom bottom"><img src="http://placekitten.com/g/152/152" /></div> </div> 

Any thoughts?

Answer 1

I am currently working on a similar problem and this seems a bit complicated. I found a solution that works in safari but will not work in chrome and firefox. They ignore

 max-height: 100%; 

properties. Check this out and resize your browser.

Although I'm not 100% sure what you are trying to achieve (your code does not change when you resize the browser window), I have create this .

Let me know if this is the right direction.