css grid - prevent text overflow on right side - css

Question

<div class='card'>
<div class='cardleft'><img class='imgcard' src="..." alt='img'></div>
<div class='cardright'>
<div class='cardtitle'>TITLE</div>
<div class='cardintro'>lorem ipsum...</div>
</div>
</div>
css
.card{
display:grid;
grid-template-columns: 320px auto;
}
.imgcard{
display:block;
width:100%;
margin:0 auto;
}
.cardright{
overflow:hidden;
}
.cardintro{
margin-top:9px;
}
Sometimes, cardintro content (lorem ipsum...) is too long and change the height of entire card.
I want the max-height of entire card to be the height of imgcard which is not fixed, and prevent overflow of cardintro text over that card's height.
I suppose this is solvable by javascript, but I hope by grid-template-rows or somehow using css.
Any help?

Answer 1

You could use absolute positioning of the cardright div that contains cardintro and set overflow hidden on the card. Here's a snippet with the same amount of text on three cards that all have different image height.
.card {
display: block;
position: relative;
overflow: hidden;
margin-bottom: 20px;
}
.imgcard {
display: block;
width: 100%;
margin: 0 auto;
}
.cardright {
position: absolute;
left: 330px;
top: 0;
right: 0;
bottom: 0;
height: 100%;
}
.cardleft {
display: inline-block;
width: 320px;
}
.cardintro {
margin-top: 9px;
}
<div class='card'>
<div class='cardleft'><img class='imgcard' src="http://via.placeholder.com/320x150" alt='img'></div>
<div class='cardright'>
<div class='cardtitle'>TITLE</div>
<div class='cardintro'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum metus vitae elit pellentesque pellentesque. Donec vulputate, mi fringilla mattis tincidunt, tellus metus placerat orci, sit amet tincidunt nisl nulla ultrices leo. Duis vitae
porttitor tortor, et imperdiet orci. In eget laoreet turpis, a porttitor metus. Aliquam vitae volutpat mi. Curabitur pellentesque arcu ex, sit amet efficitur ligula porta in. Cras metus justo, eleifend vitae ante non, congue commodo risus. In
hac habitasse platea dictumst. Proin cursus at nulla sed pretium. Maecenas semper nibh ut velit interdum varius. Sed tempus mi sit amet pellentesque rutrum. Phasellus placerat id ipsum quis tempor.</p>
<p>Curabitur est ex, rutrum vel lacus eu, imperdiet dapibus libero. Donec cursus mattis finibus. Cras eget felis et orci consectetur egestas sit amet sed sem. Phasellus ultricies mi eu mauris posuere, sit amet facilisis ante lobortis. Etiam et quam
id sapien gravida lacinia ut non diam. Etiam sit amet iaculis quam, in malesuada erat. Aliquam tristique aliquet elit, vitae maximus enim vestibulum non. Phasellus vitae iaculis orci. Integer in consequat odio, at dapibus quam.</p>
</div>
</div>
</div>
<div class='card'>
<div class='cardleft'><img class='imgcard' src="http://via.placeholder.com/320x250" alt='img'></div>
<div class='cardright'>
<div class='cardtitle'>TITLE</div>
<div class='cardintro'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum metus vitae elit pellentesque pellentesque. Donec vulputate, mi fringilla mattis tincidunt, tellus metus placerat orci, sit amet tincidunt nisl nulla ultrices leo. Duis vitae
porttitor tortor, et imperdiet orci. In eget laoreet turpis, a porttitor metus. Aliquam vitae volutpat mi. Curabitur pellentesque arcu ex, sit amet efficitur ligula porta in. Cras metus justo, eleifend vitae ante non, congue commodo risus. In
hac habitasse platea dictumst. Proin cursus at nulla sed pretium. Maecenas semper nibh ut velit interdum varius. Sed tempus mi sit amet pellentesque rutrum. Phasellus placerat id ipsum quis tempor.</p>
<p>Curabitur est ex, rutrum vel lacus eu, imperdiet dapibus libero. Donec cursus mattis finibus. Cras eget felis et orci consectetur egestas sit amet sed sem. Phasellus ultricies mi eu mauris posuere, sit amet facilisis ante lobortis. Etiam et quam
id sapien gravida lacinia ut non diam. Etiam sit amet iaculis quam, in malesuada erat. Aliquam tristique aliquet elit, vitae maximus enim vestibulum non. Phasellus vitae iaculis orci. Integer in consequat odio, at dapibus quam.</p>
</div>
</div>
</div>
<div class='card'>
<div class='cardleft'><img class='imgcard' src="http://via.placeholder.com/320x350" alt='img'></div>
<div class='cardright'>
<div class='cardtitle'>TITLE</div>
<div class='cardintro'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum metus vitae elit pellentesque pellentesque. Donec vulputate, mi fringilla mattis tincidunt, tellus metus placerat orci, sit amet tincidunt nisl nulla ultrices leo. Duis vitae
porttitor tortor, et imperdiet orci. In eget laoreet turpis, a porttitor metus. Aliquam vitae volutpat mi. Curabitur pellentesque arcu ex, sit amet efficitur ligula porta in. Cras metus justo, eleifend vitae ante non, congue commodo risus. In
hac habitasse platea dictumst. Proin cursus at nulla sed pretium. Maecenas semper nibh ut velit interdum varius. Sed tempus mi sit amet pellentesque rutrum. Phasellus placerat id ipsum quis tempor.</p>
<p>Curabitur est ex, rutrum vel lacus eu, imperdiet dapibus libero. Donec cursus mattis finibus. Cras eget felis et orci consectetur egestas sit amet sed sem. Phasellus ultricies mi eu mauris posuere, sit amet facilisis ante lobortis. Etiam et quam
id sapien gravida lacinia ut non diam. Etiam sit amet iaculis quam, in malesuada erat. Aliquam tristique aliquet elit, vitae maximus enim vestibulum non. Phasellus vitae iaculis orci. Integer in consequat odio, at dapibus quam.</p>
</div>
</div>
</div>