Angular 角材料2卡可滚动

如何使mat card material 2组件内的内容可滚动？我在material 2网站上没有找到任何内容

这不是内置功能。要使内容可滚动，请为

选择器设置一个高度。以下是一个例子：

<mat-card>
    <mat-card-header>
        <mat-card-title>CARD TITLE</mat-card-title>
    </mat-card-header>
    <mat-card-content [style.overflow]="'auto'" [style.height.px]="'300'">
        <p>
            The Shiba Inu is the smallest of the six original and distinct
            spitz breeds of dog from Japan. A small, agile dog that copes very
            well with mountainous terrain, the Shiba Inu was originally bred
            for hunting.
        </p>
    </mat-card-content>
    <mat-card-actions>
        <button mat-button>LIKE</button>
        <button mat-button>SHARE</button>
    </mat-card-actions>
</mat-card>

卡片标题

释迦牟尼犬是六种原始和独特的犬中最小的一种
来自日本的斯皮茨犬种。一种小而敏捷的狗，能应付非常大的压力
由于地形多山，石坝犬最初是被培育出来的
为了打猎。

喜欢
分享

---

链接到。

您可以利用Flexbox实现这一点：

将类

可滚动内容

添加到

mat卡

，使内容填满卡

.mat-card.scrollable-content {
  overflow: hidden;
  display: flex;
  flex-direction: column;

  > .mat-card-title-group {
    display: block;
  }

  > .mat-card-content {
    overflow-y: auto;
  }
}

---

以下是我在自己的代码中所做的

您可以遵循类似的方法，但它是有效的

.css

.html

标题
字幕
喜欢
分享

释迦牟尼犬是六种原始和独特的犬中最小的一种
来自日本的斯皮茨犬种。一种小而敏捷的狗，能应付非常大的压力
由于地形多山，石坝犬最初是被培育出来的
为了打猎。

---

试试这个。关键是在可滚动div中设置位置：绝对：

.flex {
   flex: 1 1 auto;
}    

.scrollable {
    overflow: auto;
    box-sizing: border-box;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

<mat-card class="flex">
   <div class="scrollable">
       ...
   </div>
</mat-card>

.flex{
flex:1自动；
}    
.可滚动{
溢出：自动；
框大小：边框框；
位置：绝对位置；
右：0；
排名：0；
宽度：100%；
身高：100%；
}
...

但是如果我不想固定高度。它应该是响应性的。例如，如果我有非常少的文字，那么静止高度被固定为300。那么我不能不抱歉！我已经回答了你的要求。请编辑并更新您的问题，以消除其他人的困惑。非常感谢！！您的回答有助于并给出正确的方向。您能否详细说明

符号的含义，并完成mat card html示例？无法成功实施此操作。不确定它们是否是解释的占位符，或者它们是否是过时的角度语法（使用angular 9），因为当我按原样放置它们时会产生错误。

是常规CSS语法，嵌套是SCSS的事情。只需将示例粘贴到位于的SCSS操场。如果您的angular项目使用纯css，只需使用操场上编译的输出。要全面了解CSS，请试一试！如何获得水平滚动？你的代码给了我垂直滚动。我的卡有很多列，所以我需要水平滚动以及！如果有任何帮助，我将不胜感激，我的朋友这对我来说很有效，而其他答案都没有，谢谢。

<mat-sidenav-container class="container">
<mat-sidenav-content class="content">

<mat-card class="policy-card">
  <mat-card-header>
    <div mat-card-avatar class="header-image"></div>
    <mat-card-title>Title</mat-card-title>
    <mat-card-subtitle>Subtitle</mat-card-subtitle>
  </mat-card-header>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
  <mat-card-content [style.overflow]="'auto'">
    <p>
        The Shiba Inu is the smallest of the six original and distinct
        spitz breeds of dog from Japan. A small, agile dog that copes very
        well with mountainous terrain, the Shiba Inu was originally bred
        for hunting.
    </p>
  </mat-card-content>
</mat-card>

.flex {
   flex: 1 1 auto;
}    

.scrollable {
    overflow: auto;
    box-sizing: border-box;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

<mat-card class="flex">
   <div class="scrollable">
       ...
   </div>
</mat-card>