Flexbox Spalte mit Bildern

Question

Ich versuche, 2 Bilder über die gesamte Höhe eines Bildes neben ihm zu machen. Gibt es einen Flexbox-Weg? Ich versuche, flexbox-direction: column zu verwenden, aber das Problem, das ich bekomme, ist, dass die zwei Bilder das Bild zweimal überspannen, während ich möchte, dass sie den Raum des einzelnen Bildes ausfüllen.

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

Sie flex Eigenschaft verwenden können, wie folgt aus:

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>