在较大的图像旁边垂直对齐3张图像

Question

所以这是我的代码：

<div class="content_container">
    <div class="left">
        <div class="slider" data-interval="1000">
            <img src="..." />
        </div>
    </div>
    <div class="right">
        <strong>Featured Items</strong>
        <img src="..." />
        <img src="..." />
        <img src="..." />
    </div>
</div>

content_container父级需要响应宽度，我需要设计看起来像这样：

有一种简单的方法可以用CSS（也就是不是javascript）来做到这一点吗？我已经尝试过使用弹性框弄乱一堆，但它要么没有垂直排列，要么在content_container父级设置为特定宽度时无法正确缩放。

编辑：无论您加载什么图片，左右高度都需要匹配。

Answer 1

html,
body {
  margin: 0;
  height: 100%
}

.content_container {
  background-color: blue;
  display: flex;
  height: 100%;
  width: 100%;
}

.left,
.right,
.right img {
   margin: 5px;
}

.left,
.right img {
  border: 2px solid black;
}

.left {
  flex-basis: 75%; 
}

.right {
  display: flex;
  flex-direction: column;
  flex-basis: 25%;
}

.right img {
  flex-grow: 1;
  margin-bottom: 0;
  margin-left: 0;
}

<div class="content_container">
    <div class="left">
        <div class="slider" data-interval="1000">
            <img src="..." />
        </div>
    </div>
    <div class="right">
        <strong>Featured Items</strong>
        <img src="..." />
        <img src="..." />
        <img src="..." />
    </div>
</div>