如何将行的高度限制为特定列的高度？ [引导程序]答案

【问题标题】：How can I limit the height of a row to the height of a specific column? [Bootstrap]如何将行的高度限制为特定列的高度？ [引导程序]
【发布时间】：2022-01-14 09:25:18
【问题描述】：

我有一排有 2 列。我希望行高仅基于第 1 列的内容。如有必要，应截断第 2 列的内容。

  <div class="container">
<div class="row">
  <div class="col-3" style="background-color: yellow;">Lorem, ipsum dolor.</div>
  <div class="col-9" style="background-color: blue;">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora, vitae!</div>
</div>

在示例中，第二列会中断一些宽度，而第一列尚未中断。应该避免这种情况。

背景是第一列中的图像应始终填满该行的整个高度。第 2 列中的文本是预览文本，如有必要，应缩短。

【问题讨论】：

请正确表述您的问题。如果可能的话。事情还不清楚。也可以使用codepen等在线IDE来讲述问题。
如果你想表现得好一点，或者只是使用Stack Snippets，因为它们允许回答者一键将你的代码复制到答案中以产生有效的答案。抄送@Ashishsah
这能回答你的问题吗？ bootstrap 4 row height set by specific col - not highest one

标签： html css twitter-bootstrap bootstrap-5

【解决方案1】：

将列的内容包裹在一个绝对位置的div中，如果你希望它是可滚动的，请使用overflow-auto...

<div class="container">
    <div class="row">
        <div class="col-3" style="background-color: yellow;"><img src="//via.placeholder.com/200x50"></div>
        <div class="col-9 position-relative" style="background-color: blue;">
            <div class="position-absolute overflow-auto top-0 bottom-0 start-0 end-0">Lorem ipsum dolor sit amet consectetur, dolor sit amet consectetur, adipisicing elit. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora, vitae!</div>
        </div>
    </div>
</div>

https://codeply.com/p/TGtv6KDKvD

另见：bootstrap 4 row height set by specific col - not highest one

【讨论】：

您是否有理由反复回答同一个问题，而不是重复回答？
因为这个问题适用于 Bootstrap 5，它提供了特定的类来完成所需的行为。