Flex布局高度问题

Question

我在应用fxFlex时面临增加和减小div高度的问题。我为容器提供了动态高度。我该如何解决？

先谢谢了。 Demo here

<div class="container">
   <div fxFlex="30"> Some Text </div>
   <div fxFlex="40"> Some Text </div>
   <div fxFlex="30"> Some Text </div>
</div>

注意：动态提供的容器高度（根据窗口大小/调整大小）

截屏：

Answer 1

您可以使用fxFlexFill：StackBlitz HERE

<div class="container" style="padding: 20px" fxFlexFill fxLayoutGap="10px">
  <div fxFlex="30"><mat-card>Some Text</mat-card></div>
  <div fxFlex="40"><mat-card>Some Text</mat-card></div>
  <div fxFlex="30"><mat-card>Some Text</mat-card></div>
</div>

fxFlexFill使您可以根据需要设置div的高度。

因此，我为您的CSS页添加了以下HTML，以根据您的屏幕采用最大高度。

html, body {height: 100%; margin: 0;}

演示：