CSS Flexbox图像不保留宽高比

Question

I'm trying to learn to use Flexbox. I have a page with two images separated by a bar in the middle, stacked top to bottom. I want the bar to stay the same size regardless of the browser and the two images to resize when the browser shrinks (keeping the original image size if there is extra space. I'm enforcing this through max-height on the containing divs). I can get the images to resize height-wise, but the width doesn't change to maintain aspect ratio.

I've read a couple similar questions and tutorials, but I can't seem to apply their solutions to fit my scenario. This solution seems to be the closest to my needs: http://goo.gl/iE6Wbh

Here is what I have so far. I don't know why it's causing the content to scroll on codepen either... 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'm currently working on a similar problem and it seems to be a bit tricky. I found a solution which works in safari, but won't work in chrome and firefox. They ignore the

max-height: 100%;

property. Check this out and resize browser.

Although i'm not 100% sure what you are trying to achieve (your codepen doesn't change anyhow when resizing the browser window), i've build this one .

Let me know if it's the right direction