如何让flex增长div隐藏其溢出内容

Question

使用顺风CSS。由于 flex-grow 类，我有一个 div 占用了所有可用空间。它还具有溢出滚动来隐藏其内容。

在这个 div 中，我有一个具有 h-full 类的组件。该组件的内容是卡片列表。我希望它的高度受到其父级的限制。

但是组件的高度不受其父组件的限制。我必须设置固定高度，以便溢出内容隐藏并可滚动。

但是我不想设置固定高度，因为卡片列表是可变的。

Stackblitz：https://stackblitz.com/edit/angular-playground-v13-2-ga3ymh?file=src%2Fapp%2Fapp.component.css,src%2Fapp%2Fapp.component.html

Answer 1

我认为你只需要从 div 将溢出滚动更改为溢出隐藏，然后转到我的组件 css 文件并添加：

:host {
flex-grow: 1; // dont forget to make its parent flex, so the component can take its parent height
display: flex;
overflow: scroll;
}

:host 伪类在 CSS 中用于定位组件的宿主元素。宿主元素是 DOM 中 Angular 组件所附加的元素。

我在 Stackblitz 为您做了一个例子以了解更多详细信息