Html 使用背景图像强制空div覆盖容器div的高度

我有一行有两列。我希望包含带背景图像的

.product image

空div（右侧）的列与包含带文本的

.product text

div（左侧）的列具有相同的高度。背景图像应覆盖右栏的整个区域

我在这里创建了一个代码笔：

HTML:

---

我99%肯定你不能。其他解决方案：具有固定高度的div、表格显示、javascript、flexbox我最喜欢的是flexbox，但javascript可能是一个后备方案：）谢谢您的回复@Ianis。您知道可以使用哪种flexbox样式来实现此效果吗？我尝试将

display:flex

添加到父元素（行）中，并将

flex direction:column

添加到子div中，但似乎不起作用。好吧-我想我明白了。感谢@Mi Creative的参考资料。更新的代码笔：

<div class="container-fluid subpage-product">
  <div class="row">
    <div class="col-lg-6 col-md-6 col-xs-12 product-text">
      <div class="product-icon">
        <img src="https://s-media-cache-ak0.pinimg.com/736x/5a/dc/89/5adc89f4a0752dfec5c2f9ba625bfac5.jpg">
      </div>
      <h2>Meow Meow Meow</h2>
      <p>Pelt around the house and up and down stairs chasing phantoms shove bum in owner's face like camera lens stare at ceiling.</p>
    </div>
    <div class="col-lg-6 col-md-6 col-xs-12 no-padding product-img" id="horse-racing-bg-img-01">
  </div>
</div>

  #horse-racing-bg-img-01 {
    background: url(http://i.imgur.com/C9xULnI.jpg) no-repeat;
    background-size: cover;
  }

  .subpage-product .row {
    overflow: hidden;
    .product-text {
      padding: 70px 100px;
      text-align:center;
      background-color: #000;
      color: #fff;
    }
    .product-img {
      height: 100%;
    }
    .product-icon {
      height: 80px;
      width: 80px;
      display: block;
      margin: 0 auto 0;
      border-radius: 50%;
      border: 1px solid white;
      background-color: #fff;
      img {
        height: 50px;
        width: 50px;
        margin: 15px 15px 0 13px;
      }
    }
  }