Is there a simple way to use CSS to ensure that the second column, which will contain a lot of text, overflows vertically at the same size as the left column image tag?
The image changes size based on the window size (responsive) using the 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 attempted to add this CSS to my right column:
.mytext {
overflow-y: scroll;
height: 500px;
}
However, setting pixels as the height does not work as expected when resizing the browser.
Here is the issue I am currently facing with short size.
This is what happens when I resize down with fixed height.
Is there an easy way to achieve this using CSS?