如何使此垂直列表填充容器的垂直高度？

Question

I am using flexbox to create my 2 column layout. Everything is working well, however I'd like to have my list items in my right column always take up the full height. Each <li> element contains an <img> element.

When I start to shrink the window width, as you can see, the <ul> element's height starts to scale up to keep it's aspect.

If I make the window really wide, the list element(s) will start to get clipped off.

I'd like to always be able to see all 4 list items. I'd be OK if I have to lock the width(s) or height(s) down. As you can see, I've set a min/max height but no luck. I am also OK with using the <li> elements as a container/viewable area for the images. Meaning, if the image inside the <li> gets clipped off overflow:hidden or something - that's fine. I am just trying to keep the two columns 50% each, and the right column always take the full height.

HTML

<div id="container">
    <div id="foo">
       ...
    </div>
    <div id="bar">
        <ul>
            <li><img></li>
            <li><img></li>
        </ul>
    </div>
</div>

CSS

#container {
    display: flex;
    flex-direction: row;
    height: 600px;
    min-height: 600px;
    max-height: 600px;
}

#foo {
  display: flex;
  flex-direction: column;
  order: 1;
  width: 50%;
}

#bar {
    display: flex;
    flex-direction: column;
    order: 2;
    width: 50%;
}

Answer 1

Only give display: flex to the parent container. All children the inside parent container will be equal to the height of the child with the maximum height.

.container {
  display: flex;
}

.foo {
  width: 50%;
  order: 1;
}

.bar {
  width: 50%;
  order: 2;
}