包含圖像的Flexbox列

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：

.wrapper { 
display: flex; 
} 

.first { 
flex: 1; 
} 

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

.second-a { 
flex: 1; 
} 

.second-b { 
flex: 1; 
} 

Answer 1

您可以使用flex屬性，像這樣：

fiddle

.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>