html - 根据 API 中的未知内容调整 Angular 中弹性项目的高度

Question

我的角度应用程序中有以下代码。

模板

<div class="container">
    <div class="detail">
      <p>{{object.key1}}</p>
    </div>
    <div class="detail">
      <p>{{object.key2}} </p>
    </div>
    <div class="detail">
      <p>{{object.key2}}</p>
    </div>
</div>

scss

.container{
        width: 50%;
        border: 2px solid green;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
}

上面的代码很好地安排了detaildiv 里面的containerdiv。但是detaildiv 内的文本正在外面。

我可以通过给 div 一个height和一些padding来调整它detail，但是内容的行数是动态的和未知的，我无法真正决定高度。这是因为内容量未知。如果是这样，我怎样才能在弹性项目中适应从 API 获得的未知数量的内容（文本）。

我在网上找不到任何解决方案。任何帮助，将不胜感激。

标签： htmlcssangularflexbox