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

は時々、cardintroコンテンツ（Loremのイプサムは...）長すぎると全体cardの高さを変更します。

cardの最大高さは、固定されていないimgcardの高さにして、そのカードの高さにテキストcardintroのオーバーフローを防止します。

これはjavascriptで解くことができますが、grid-template-rowsか何とかcssを使用したいと考えています。

助けが必要ですか？

Answer 1

cardintroを含むcardright divの絶対配置を使用し、カードに隠れたオーバーフローを設定することができます。ここでは、3枚のカードに同じ量のテキストがあり、すべての画像の高さが異なるスニペットがあります。

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