包含图像的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>