Элемент Flex должен иметь указанную высоту c даже при пустом содержимом

Question

В настоящее время я использую angular flexbox для приведенного ниже кода.

Я бы хотел, чтобы средний элемент flex (div, чтобы быть более точным c) имел указанную высоту c, даже если его содержимое пусто.

Решение должно включать использование исключительно гибких свойств для определения высоты, если это невозможно.

<div fxLayout="column"  style="height:100vh">
  <header style="background-color: lightblue;" >
        Header
  </header>
  <div style="background-color: orange;"  >

  </div>
  <footer style="background-color: yellow"> Footer </footer>
</div>

Answer 1

Вы можете добавить к нему fxFlex, чтобы задать ему высоту, это должно работать, потому что он находится внутри столбца div, который имеет фиксированную высоту (вы можете поиграться со значением внутри fxFlex, чтобы удовлетворить ваши потребности).

<div fxFlex="50" style="background-color: orange;">
</div>

Вы также можете использовать fxFill для того же элемента div, чтобы заполнить все доступное пространство:

<div fxFill style="background-color: orange;">
</div>

source: https://tburleson-layouts-demos.firebaseapp.com/# / docs

Answer 2

<div fxLayout="column"  style="height:100vh">
  <header style="background-color: lightblue;" >
        Header
  </header>
  <div style="background-color: orange;" fxFlexFill>

  </div>
  <footer style="background-color: yellow"> Footer </footer>
</div>

Директива fxFlexFill должна использоваться для элементов в контейнере fxLayout и идентифицирует элемент, ширина и высота которого должны быть максимизированы