I find it challenging to explain what I have in mind without a visual reference:
https://i.sstatic.net/5MSVr.png
Some Background - There are certain aspects that can't be altered or shouldn't be changed:
On my blog's front page, I utilize a card layout where the width of each card is dynamically calculated by JavaScript based on the screen width. The height of the card is set to match its width (intending for a square shape) and the image inside maintains a 16:9 ratio. In the content section, the title doesn't wrap, the footer only contains the date, but the length of the actual text varies. Furthermore, when viewed on wider screens with larger card widths, I want more intro text to appear so that the space is effectively utilized.
Issue
When the text is too lengthy or the card's width is too small (such as on smaller screens), the text overflows from the container and pushes down the footer despite having "overflow:hidden" set.
https://i.sstatic.net/niTkk.png
How can I prevent the text div from pushing down the footer if the text exceeds the width of the card? Essentially, how can I ensure that its height equals the card's height minus the image's height, the title div's height, and the footer div's height? While achieving this using JavaScript wouldn't be difficult, is there a way to accomplish it solely with CSS? Flexbox might seem like a useful solution by allowing the text div to expand, but my attempts didn't yield the expected results. View this fiddle - It doesn't function properly without setting a fixed height for the flex container; refer to this fiddle where a specific height is assigned to the flex container. The code snippets are provided below:
<style>
.card{
border:1px solid #000
}
.container{
padding-top:100%;
position:relative;
}
.item{
top:0;bottom:0;left:0;right:0;position:absolute
}
.teaser{
padding-top:56.25%;
background-image:url('http://placehold.it/320x180?text=%20');
}
.content{
display:flex;
flex-direction:column;
height:150px; /* fixed height makes it work */
}
.title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.title, .intro, .info{padding:10px}
.intro{overflow:hidden}
</style>
<div class="card" style="width:360.25px">
<div class="container">
<div class="item">
<div class="teaser">
</div>
<div class="content">
<div class="title">
A Blog Title A Blog Title A Blog Title A Blog Title A Blog Title A Blog Title...
</div>
<div class="intro">
Some Intro text Some Intro text Some Intro text...
</div>
<div class="info">
<time>2019-10-23</time>
</div>
</div>
</div>
</div>
</div>
Is there a CSS-only solution to this dilemma?