Как создать эффект масштабирования изображения во вложенном макете столбца flexbox?

Question

Предыстория: Следующая схема flexbox работает как положено.При уменьшении ширины браузера все три изображения уменьшаются с одинаковой скоростью.Если вы запускаете фрагмент кода, нажмите ссылку Full page и масштабируйте браузер, чтобы увидеть этот простой эффект.

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

Однако, когда я добавляю flex-direction: column; к классу flexInterior, эффект не работает должным образом.Левое изображение масштабируется, как и раньше, но два изображения внутри flexInterior остаются статичными.Их правые края постепенно обрезаются, когда браузер сжимается, а не масштабируется.Это происходит из-за линии overflow: hidden;, которая необходима в исходном макете строки, чтобы вызвать эффект масштабирования, но создает эту новую проблему обрезки в версии макета столбца.

Вопрос: В макете столбца как сделать масштаб изображения похожим на макет строки?Это упрощенный пример.В реальной версии я использую медиа-запросы для отображения версии столбца или строки в зависимости от ширины браузера.

.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

Дочерние элементы .flexInterior шире своих родительских

Удалите ширину из .flexChildTwo и .flexChildThree и добавьте ее к .flexInterior

.flexInterior {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 400px
}

Пример:https://codepen.io/IanJohnson/pen/QzqggE?editors=1100

Вы также захотите избавиться от margin-right, когда он находится в макете столбца