未知高度容器中的文本元素

Question

在没有图像的情况下，我有点难以描述我想要做什么：

一些背景 - 这些是我无法改变或不想改变的：

我将这种卡片布局用于我的博客首页。卡片的宽度是通过javascript计算的（根据不同的屏幕宽度）所以CSS是未知的，高度等于宽度（我希望卡片是方形的），图像的比例总是16：9。在内容区域，标题不换行，页脚只是一个日期，但文本的长度是未知的（未知，因为每个博客帖子可能有不同的介绍文本长度。此外，在更宽的屏幕和卡片的宽度越大，我希望显示的介绍文本越多，这样空间就被填满了）

问题

如果文本太长或卡片宽度太小（在较小的屏幕上），即使我为它设置了“溢出：隐藏”，文本也会伸出容器并且页脚会被压下。

如果文本对于卡片的宽度而言太长，我如何确保文本 div 不会压低页脚？ （又名，我如何确保它的高度等于卡片的高度减去图像的高度减去标题 div 的高度和减去页脚 div 的高度）。使用 javascript 应该不难，但是可以用纯 CSS 来完成吗？通过使文本 div 增长，Flexbox 似乎很方便，但它并没有像我想象的那样工作，请参阅 fiddle - 如果不为 flex 容器设置固定高度，它就无法工作，请参阅 @987654324 @ 为弹性容器设置了一定的高度。代码在这里：

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

纯CSS能解决这个问题吗？

Answer 1

// you have not set min and max height of that container please add max and min height of intro.div it will work.

.intro {
    overflow: hidden;
    min-height: 65px;
    max-height: 60px;
}

Answer 2

我不确定我是否正确理解了这个问题，但如果你会添加 flex-wrap:wrap; 给你的.title, .intro

.title{flex-wrap:wrap;}
.intro{flex-wrap:wrap;}

并删除容器填充，它应该可以工作......

.card{
  border:1px solid #000
}
.container{
 /* padding-top:100vh;*/
  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;

}
.title{flex-wrap:wrap;}
.title, .intro, .info{padding:10px}
.intro{flex-wrap:wrap;}

https://jsfiddle.net/6q0tLobr/