使用Flexbox制作两个相同高度的列

Question

我正在使用Flexbox创建两个列布局。一列具有简单的内容，具有颜色背景。另一列的图像应覆盖Div的全高/宽度

这两列都应是.content DIV的高度(根据屏幕尺寸将生长/收缩(。如果.marketing-image img有任何溢出，则应切断。我想仅使用CSS/SCSS解决此问题，请不要JavaScript：(

任何帮助都将受到赞赏！

这是我的代码：https：//codepen.io/erbanach/pen/bmdokm

.block-marketing {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%;
}
.split {
  width: 50%;
}
.left {
  order: 1;
  display: flex;
}
.right {
  order: 2;
  display: flex;
}
.marketing-image {
  flex: 1;
}
.marketing-image img {
  object-fit: cover;
  width: 100%;
}
.content {
  flex: 1;
  padding: 50px;
  background: black;
  color: white;
}

<div class="block-marketing">
  <div class="split left">
    <div class="marketing-image">
      <img src="http://via.placeholder.com/350x150">
    </div>
  </div>
  <div class="split right">
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus odio id magna pharetra iaculis. Praesent faucibus placerat porttitor. Donec dignissim nibh et commodo luctus. Integer dictum ultricies urna ut viverra. Vivamus tempor iaculis
        rutrum. Duis suscipit libero sit amet quam vehicula, sit amet ullamcorper felis commodo. Aliquam eu fringilla lectus, a laoreet nisi. Etiam accumsan ex libero, eget posuere dolor sodales in.</p>
    </div>
  </div>
</div>

Answer 1

您可以简单地从.block-marketing选择器中删除align-items: center，然后将height: 100%添加到图像：

我已经分叉并更新了您的Codepen：https://codepen.io/anon/pen/qrbzxz

Answer 2

如果可以使用网格，只需

.block-marketing {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.marketing-image {
  height: 100%;
  img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}
.content {
  padding: 50px;
  background: pink;
}