이 세로 목록을 컨테이너의 세로 높이로 채우려면 어떻게해야합니까?

Question

저는 2 열 레이아웃을 만들기 위해 flexbox를 사용하고 있습니다. 모든 것이 잘 작동하지만 오른쪽 열의 목록 항목을 항상 최고 높이로 가져 가고 싶습니다. 각 <li> 요소는 <img> 요소를 포함합니다.

너가 볼 수있는 것처럼 너비를 줄이기 시작하면, <ul> 엘레멘트의 높이가 그 모양을 유지하기 위해 확대되기 시작한다.

이 실제로 인 경우 목록 요소가 잘 리기 시작합니다.

항상 네 가지 목록 항목을 모두보고 싶습니다. 너비 (s) 또는 높이 (s)를 낮춰야 만해도 괜찮을 것입니다. 보시다시피, 최소 높이/최대 높이를 설정했지만 행운은 없습니다. 또한 이미지의 컨테이너/가시 영역으로 <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; 
}