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

Question

我使用flexbox创建我的2列布局。一切都运作良好，但我希望我的右栏中的列表项始终占据全部高度。每个<li>元素都包含<img>元素。

当我开始缩小窗口宽度时，正如您所看到的，<ul>元素的高度开始向上扩展以保持其宽高。

如果我将窗口设置为宽，则列表元素将开始被剪掉。

我希望始终能够看到所有4个列表项。如果我必须锁定宽度或高度，我可以。如你所见，我设定了最小/最大高度，但没有运气。我也可以使用<li>元素作为图像的容器/可视区域。这意味着，如果<li>内的图像被剪掉overflow:hidden或其他东西 - 那很好。我只是试图将两列各保持50％，而右列始终占据整个高度。

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

仅将display: flex提供给父容器。内部父容器中的所有子容器将等于具有最大高度的子容器的高度。

.container {
  display: flex;
}

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

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