How can I limit the height of a row to the height of a specific column? [Bootstrap]

Question

I have a row with 2 columns. I want the height of the row to be based solely on the content of column 1. The content of column 2 should be truncated if necessary.

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

In the example it happens with some widths that the 2nd column breaks, the first not yet. This should be avoided.

The background is that there is an image in the first column that should always fill the full height of the row. The text in column 2 is a preview text and should be shortened if necessary.

please phrase your question correctly. If possible. Things are not clear. You can also use codepen and other online IDE to tell about the problem. — Ashish sah, Dec 09 '21 at 14:51
Or just use [Stack Snippets](https://meta.stackoverflow.com/q/358992) if you want to be nice, since those allow answerers to copy your code to the answer with one click to produce a working answer. cc @Ashishsah — Heretic Monkey, Dec 09 '21 at 15:40
Does this answer your question? [bootstrap 4 row height set by specific col - not highest one](https://stackoverflow.com/questions/53409995/bootstrap-4-row-height-set-by-specific-col-not-highest-one) — Heretic Monkey, Dec 09 '21 at 15:41

score 1 · Accepted Answer · answered Dec 09 '21 at 15:36

Wrap the content of the column in a absolute position div, and use overflow-auto if you want it to be scrollable...

<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

Also see: bootstrap 4 row height set by specific col - not highest one

Is there a reason you're answering the same question repeatedly instead of closing as duplicate? — Heretic Monkey, Dec 09 '21 at 15:41
Because this question is applicable to Bootstrap 5 which offers specific classes for accomplishing the desired behavior. — Carol Skelly, Dec 09 '21 at 17:08

How can I limit the height of a row to the height of a specific column? [Bootstrap]

1 Answers1