이미지가있는 플렉스 박스 열

Question

나는 2 개의 이미지가 그 옆에있는 이미지의 전체 높이에 걸쳐 있도록하려고합니다. Flexbox를 사용하는 방법이 있습니까? 나는 flexbox-direction : column을 사용하려고 노력하고 있는데, 문제는 내가 두 이미지가 한 이미지의 공간을 채우고 싶을 때 이미지의 두 배에 걸쳐 있다는 것이다.

https://jsfiddle.net/nLsa4oqc/

HTML :

<div class="wrapper"> 
<div class="first"> 
<img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt=""> 
</div> 

<div class="second"> 
<div class="second-a"> 
    <img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt=""> 
</div> 
<div class="second-b"> 
    <img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt=""> 
</div> 
</div> 
</div> 

CSS :이 같은 flex 속성을 사용할 수 있습니다

.wrapper { 
display: flex; 
} 

.first { 
flex: 1; 
} 

.second { 
flex: 1; 
display: flex; 
flex-direction: column; 
} 

.second-a { 
flex: 1; 
} 

.second-b { 
flex: 1; 
} 

Answer 1

:

fiddle

,451,515,

.wrapper { 
 
    display: flex; 
 
} 
 

 
.first { 
 
    flex: 2; 
 
} 
 

 
.second { 
 
    flex: 1; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    height: auto; 
 
    vertical-align: bottom; 
 
}

<div class="wrapper"> 
 
    <div class="first"> 
 
    <img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt=""> 
 
    </div> 
 

 
    <div class="second"> 
 
    <div class="second-a"> 
 
     <img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt=""> 
 
    </div> 
 
    <div class="second-b"> 
 
     <img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt=""> 
 
    </div> 
 
    </div> 
 
</div>