How do I create image scaling effect in nested flexbox column layout? - css

Question

Backstory: The following flexbox based layout works as expected. As I shrink the width of the browser all three images scale down at equal rates. If you run the code snippet please click the Full page link and scale the browser to see this simple effect.
.flexParent {
display: flex;
margin: 0 auto;
width: 80%;
}
.flexChildOne {
margin-right: 16px;
}
.flexChildOne img {
width: 100%;
height: auto;
}
.flexInterior {
display: flex;
overflow: hidden;
}
.flexChildTwo {
width: 400px;
margin-right: 16px;
}
.flexChildTwo img {
width: 100%;
height: auto;
}
.flexChildThree {
width: 400px;
}
.flexChildThree img {
width: 100%;
height: auto;
}
<div class="flexParent">
<div class="flexChildOne"><img src="https://i.stack.imgur.com/9lzSH.jpg"></div>
<div class="flexInterior">
<div class="flexChildTwo"><img src="https://i.stack.imgur.com/8Q4Q7.jpg"></div>
<div class="flexChildThree"><img src="https://i.stack.imgur.com/5vBC6.jpg"></div>
</div>
</div>
However when I add flex-direction: column; to the flexInterior class the effect doesn't work as needed. The left image scales as before but the two images inside flexInterior remain static. Their right edges get progressively cut off as the browser shrinks instead of scaling. This is because of the line overflow: hidden; which is needed in the original row layout to cause the scaling effect but creates this new cutting problem in the column layout version.
Question: In the column layout how do I make the images scale similar to the row layout? This is a simplified example. In the actual version I'm using media queries to display either the column or row version depending on the width of the browser.
.flexParent {
display: flex;
margin: 0 auto;
width: 80%;
}
.flexChildOne {
margin-right: 16px;
}
.flexChildOne img {
width: 100%;
height: auto;
}
.flexInterior {
display: flex;
flex-direction: column; /* Only line that was changed */
overflow: hidden;
}
.flexChildTwo {
width: 400px;
margin-right: 16px;
}
.flexChildTwo img {
width: 100%;
height: auto;
}
.flexChildThree {
width: 400px;
}
.flexChildThree img {
width: 100%;
height: auto;
}
<div class="flexParent">
<div class="flexChildOne"><img src="https://i.stack.imgur.com/9lzSH.jpg"></div>
<div class="flexInterior">
<div class="flexChildTwo"><img src="https://i.stack.imgur.com/8Q4Q7.jpg"></div>
<div class="flexChildThree"><img src="https://i.stack.imgur.com/5vBC6.jpg"></div>
</div>
</div>

Answer 1

The child elements of .flexInterior are wider than their parent
Remove the width from .flexChildTwo and .flexChildThree and add it to .flexInterior
.flexInterior {
display: flex;
flex-direction: column;
overflow: hidden;
width: 400px
}
Example: https://codepen.io/IanJohnson/pen/QzqggE?editors=1100
You will also want to get rid of the margin-right when its in the column layout