Bootstrap column adjust to shorter column

Question

Using bootstrap, I have a row and two columns. The first contains an image, the second some text. I'm trying to cut off the text at image height. Is this possible without JavaScript and fixed heights?

Thanks for your help!

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

You would need to define a fixed `height`, otherwise the there's no reference point to determine what would be "overflowing" content — IvanS95, Feb 26 '19 at 14:15
Ah, a pity. Thanks for your answer. Would you mind posting this as an answer, so I can accept it? — Doidel, Feb 26 '19 at 14:17
Hmm doesn't matter, but it's not required. Probably I would make it hidden and on click show the full text, but for the sake of this demo it really doesn't matter. — Doidel, Feb 26 '19 at 14:33

Carol Skelly · Accepted Answer · 2019-02-26T15:08:03.167

You can use an inner div on the text column and use position:absolute. Then set overflow-auto on both the column and inner 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;
}

Demo: https://www.codeply.com/go/zN6zQkyR4M

Oh well played madam, that's exactly what I was hoping for! Thanks a lot! Would you mind adding the css .scroll to your answer too? For future reference :) — Doidel, Feb 26 '19 at 14:36

Bootstrap column adjust to shorter column

1 Answers1