어떻게 이런 DOM 구조에서 인 flexbox

Question

를 사용 등분으로 구분을 강제 균등로 배포한다 ID (2, 4)와

#1{ 
    display: flex; 
    flex-direction: row; 
} 
#2, #4{ 
    flex: 1; 
} 

div의 :

<div id="1"> 
    <div id="2"> 
    <div id="3"> 
    </div> 
    </div> 
    <div id="4"> 
    <div id="5"> 
    </div> 
    </div> 
</div> 

CSS와 같은 지정된 id 3과 5의 내용의 너비 합계가 id가 1 인 DOM의 너비를 초과하지 않는 한 길다.

합계가 너비를 초과하면 균등하게 분배되지 않고 더 넓은 내용을 가진 것이 고마워 더 넓은 너비. 이런 경우에도 2와 4가 flexbox를 사용하여 균일 한 폭을 차지하게하려면 어떻게해야합니까?

%로 폭 지정을 사용하고 싶지 않습니다. 나는 flexbox에 충실하고 싶다.

Answer 1

당신은 요소의 성장 또는 콘텐츠의에 독립적으로 축소 지정하려면 제로 flex basis :

flex-basis: 0; 

그러나, my demo 잘못 크롬에서 작동 : 큰 이미지는 상관없이 부모 컨테이너 없다 기준이 설정되어 제로가 뻗어 . 해결 방법으로, 최대 너비를 설정할 수 있습니다 : 모든

img { 
    max-width: 100%; 
    height: auto; 
}