Angular Flex-Layout问题：右侧mat-card垂直固定且保留水平响应性

嘿，刚好我之前做项目时遇到过一模一样的需求，给你两个实用的方案，既能保留水平方向的响应式行为，又能实现右侧mat-card的垂直固定效果：

方案一：滚动时右侧卡片固定在视口（常用需求） #

如果你的需求是页面滚动时右侧卡片始终停留在视口内，同时水平方向随窗口宽度自适应，那可以结合CSS的position: sticky和Flex布局来实现：

代码示例 #

首先确保你的两个div在一个fxLayout="row"的父容器中（这是Angular Flex-Layout的基础布局）：

<div fxLayout="row" style="min-height: 100vh;">
  <!-- 左侧响应式卡片 -->
  <div fxFlex>
    <mat-card>
      <!-- 这里可以放长内容，测试滚动效果 -->
      <p>左侧内容...</p>
      <!-- 重复多行模拟长内容 -->
    </mat-card>
  </div>

  <!-- 右侧垂直固定卡片 -->
  <div fxFlex="50" class="sticky-right-card">
    <mat-card>
      <h3>我是垂直固定的右侧卡片</h3>
      <p>滚动页面时我会停留在视口内</p>
    </mat-card>
  </div>
</div>

然后添加对应的CSS样式：

.sticky-right-card {
  position: sticky;
  top: 20px; /* 调整卡片距离顶部的距离，比如20px */
  align-self: flex-start; /* 关键：避免Flex布局将容器拉伸至与左侧等高，确保sticky生效 */
}

.sticky-right-card mat-card {
  height: 100%; /* 让卡片填满容器高度，也可以设置固定高度如height: 400px; */
}

注意事项 #

• 父容器不要设置overflow: hidden，否则sticky属性会失效；
• align-self: flex-start必须加，否则Flex布局会强制右侧容器和左侧等高，sticky无法正常工作。

方案二：右侧卡片垂直高度固定（不随窗口/内容变化） #

如果你的需求是右侧卡片的垂直高度始终固定，不管窗口怎么缩放或内容多少，只需要给mat-card设置固定高度即可，同时保留fxFlex的水平响应：

代码示例 #

<div fxLayout="row">
  <div fxFlex>
    <mat-card>左侧响应式卡片，宽度随窗口变化</mat-card>
  </div>

  <div fxFlex="50">
    <mat-card class="fixed-height-card">
      <h3>我是垂直高度固定的卡片</h3>
      <p>窗口缩放时我的高度不变，宽度会自适应</p>
      <!-- 如果内容超过固定高度，会自动显示滚动条 -->
    </mat-card>
  </div>
</div>

对应的CSS：

.fixed-height-card {
  height: 450px; /* 根据需求设置固定高度，比如450px */
  overflow-y: auto; /* 内容超出高度时显示垂直滚动条，避免内容溢出 */
}

这个方案更简单，适合不需要滚动固定，只是单纯固定垂直高度的场景。

内容的提问来源于stack exchange，提问作者Beese