Проблема высоты расположения Flex - PullRequest
Новая
       10

Проблема высоты расположения Flex

2 голосов
/ 08 апреля 2019

У меня проблема с увеличением и уменьшением высоты div, где я применяю fxFlex.Я предоставил динамическую высоту для контейнера.Как я могу это исправить?

Заранее спасибо. Демонстрация здесь 

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

Примечание : Высота предоставленного контейнера динамически (при размере окна / изменении размера)

Снимок экрана: enter image description here

1 Ответ

1 голос
/ 06 мая 2019

Вот что вы можете сделать, используя fxFlexFill: StackBlitz ЗДЕСЬ 

<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;}

DEMO:

enter image description here

...