0

I would like the second column, which shall contain lots of text, to overflow vertically at the exact size of the left column which is an img tag.

This img changes size according to your window size (responsive), I am using bootstrap grid system.

<div class="row">
    <div class="col-7 col-12-sm">             
        <div style="position:relative" class="col-9">
            <img src="" alt="">
        </div>
    </div>
    <div class="col-5 col-12-sm">
        <div class="mytext">
            Lorem Ipsum is simply dummy text of the printing and
            typesetting industry. Lorem Ipsum has been the industry's standar
            dummy text ever since the 1500s, when an unknown printer took a galley
        </div>
    </div>
</div>

I tried to add this css to my right column

.mytext {
    overflow-y: scroll;
    height: 500px;
}

but obviously, fixing px as height does not work as intended when I resize my browser.

issue I have right now with short size

when I resize down with fixed height

is there a way using css to do this easily ?

Archalia
  • 1

1 Answers1

0

set the max-height for your .mytext class to the height of the image like this:

.mytext{ max-height:300px; overflow-y:auto; }

Or set the image and .mytext to have the same max height.

And your classnames should be col-sm-12 not col-12-sm. Setting column width as col-7 or col-5 is the same as using col-xs-7 or col-xs-5. The new bootstrap implementation has replaced col-xs-n with col-n.

Checkout the solution on this link: https://codepen.io/freeborn_ig/pen/YzNzGGm

freeguy
  • 11
  • 5