html - 带有图片的Flexbox列

我正在尝试使2张图像跨越其旁边图像的整个高度。有弹性的方式吗？我正在尝试使用flexbox-direction：列，但是我遇到的问题是2个图像跨过图像的两倍，而我希望它们填充单个图像的空间。

https://jsfiddle.net/nLsa4oqc/

.wrapper {
  display: flex;
}

.first {
  flex: 1;
}

.second {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.second-a {
  flex: 1;
}

.second-b {
  flex: 1;
}

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

最佳答案

您可以使用flex属性，如下所示：

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>

关于html - 带有图片的Flexbox列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43644990/