画像付きフレックスボックスの列

Question

私は2つの画像をその横の画像全体の高さに広げようとしています。フレックスボックスの方法はありますか？私はflexbox-direction：columnを使用しようとしていますが、私が得ている問題は、2つのイメージが1つのイメージのスペースを埋めるのに2倍のイメージを張るということです。

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

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