引导列调整为较短的列[重复]

Question

使用引导程序，我有一行和两列。第一个包含图像，第二个包含文本。我试图在图像高度切断文本。如果没有 JavaScript 和固定高度，这可能吗？

感谢您的帮助！

.row {
  margin: 1rem 0 0 1rem !important;
  max-width: 20rem;
}
div>div {
  border: 1px solid red;
}
.col-5 {
  padding: 0 !important;
}
.col-7 {
  overflow-y: hidden;
  /* How do I make this column as tall as the previous? */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-5">
    <img src="https://booklers.net/images/userImages/Doidel/bookImages/4/thumb.jpg" class="img-fluid" />
  </div>
  <div class="col-7">
    This is some test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text.
  </div>
</div>

Answer 1

您可以在文本列上使用内部 div 并使用 position:absolute。然后在列和内部 div 上设置溢出自动。

<div class="container-fluid">
    <div class="row">
        <div class="col-5">
            <img src="https://booklers.net/images/userImages/Doidel/bookImages/4/thumb.jpg" class="img-fluid">
        </div>
        <div class="col-7 overflow-auto">
            <div class="scroll">
                This is some test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text....
            </div>
        </div>
    </div>
</div>

.scroll {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

演示：https://www.codeply.com/go/zN6zQkyR4M