It is a little hard for me to describe what I want to do without an image:

[![enter image description here](https://i.stack.imgur.com/5MSVr.png)](https://i.stack.imgur.com/5MSVr.png)

**Some Background -** These are things I can't change or don't want to change:

I use this card layout for my blog front page. The card's width is calculated by javascript(according to different screen width) so it is unknown to CSS, the height is equal to width(I want the card to be a Square), the image's ratio is always 16:9. In the content area, The title doesn't wrap, the footer is just a date, but the texts' length is unknown(It is unknown because every blog post could have different intro text length. Besides, when in wider screen and the card's width is larger, I want the more intro text to be displayed so the space is filled up)

**Problem**

If the text is too long or the card's width is too small(on smaller screen), the text will stick out of the container and the footer will be pushed down, even though I set "overflow:hidden" for it. 

[![enter image description here](https://i.stack.imgur.com/niTkk.png)](https://i.stack.imgur.com/niTkk.png)

So how do I make sure the text div doesn't push down the footer if the text is too long for the card's width? (a.k.a, how do I make sure its height equal to the card's height minus image's height minus title div's height and minus footer div's height). This shouldn't be hard using javascript, but can it be done with pure CSS? Flexbox seems handy for this by making the text div to grow, but it didn't work as I thought it would, see this [fiddle](https://jsfiddle.net/3hnvm20b/) - It doesn't work without setting a fixed height for the flex container, see this [fiddle](https://jsfiddle.net/3hnvm20b/1/) where a certain height is set for the flex container. Codes are here:

```
<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">  <!-- width calculated by javascript -->
  <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 A Blog Title A Blog Title A Blog Title 
        </div>
        <div class="intro">
          Some Intro text Some Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro textSome Intro text
        </div>
        <div class="info">
            <time>2019-10-23</time>
        </div>   
     </div>
    </div>
  </div>
</div>

```

Can this problem be solved by pure CSS?