Angular / Flex：设置组件的最大宽度

Question

我正在尝试创建某种Reddit-clone，以显示帖子及其内容，但是如果内容长于特定宽度，则它应该中断并从新行开始。由于某些原因，我无法使用最大宽度。席卡的宽度与帖子的body属性相同。

据我所知，我应该在fxFlex中更改一些值，我尝试过这样做，但仍然无法正常工作。

发布

<mat-card>
  <mat-card-header>
    <mat-card-title>
      {{ post.title }}
    </mat-card-title>
    <mat-card-subtitle>
      {{post.author}}<br>
      {{post.creationDate | date: 'dd/MM/yyyy'}}
  </mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <p>
    {{post.body}}
  </p>
  </mat-card-content>
  <div style="text-align:right">
  <span><mat-icon>arrow_upward</mat-icon>{{post.upvotes}}</span><pre style="display: inline">  </pre>
  <span><mat-icon>arrow_downward</mat-icon>{{post.downvotes}}</span>
</div>
</mat-card>

应用组件

<app-navheader></app-navheader>
<div 
  fxLayout="column wrap"
  fxLayout.xs="column"
  fxLayoutGap="0.5%"
  fxLayoutAlign="center center"      
>
  <div 
    class="post"
    *ngFor="let p of posts"
    fxFlex="0 0 calc(25%-0.5%)"
    fxFlex.xs="100%">
    <app-post [post]="p"></app-post>
  </div>
</div>