Angular гибкость материала - прокрутка внутри fxLayout

Question

• 1000 *

 <div style="height:100vh;" fxLayout="column">
  <div fxFlex="auto" fxLayout="column" fxFlexAlign="center center">
    <div fxFlex="none">header</div>
    <div fxFlex="auto">
      <h1>Title here</h1>
      <div fxLayout="column" style="overflow-y:auto">
          <div style="height:3000px;background:red;">
            Why is doesn't this scroll?
          </div>
      </div>
    </div>
    <div fxFlex="none" style="background:green;">footer</div>
  </div>
</div>

Я не могу понять, почему красный контейнер не прокручивается между верхним и нижним колонтитулами.

Stackblitz здесь

I на самом деле не хочу добавлять высоту: 100vh к родительскому div, так как это разбивает другие страницы, и даже если я это сделаю, все равно не будет работать так, как я ожидал.

Очень надеюсь, что кто-то сможет пролить свет на это.

Заранее спасибо!

Answer 1

Решение:

<div style="height:100vh;" fxLayout="column">
  <div fxFlex="auto" fxLayout="column" fxFlexAlign="center center">
    <div fxFlex="none">header</div>
    <div fxFlex="auto">
      <h1>Title here</h1>
      <div style="overflow-y:auto; height: 300px;"> // <== look here
          <div style="height:3000px;background:red;">
            Why is doesn't this scroll?
          </div>
      </div>
    </div>
    <div fxFlex="none" style="background:green;">footer</div>
  </div>
</div>

Answer 2

Установите высоту контейнера div и удалите fxLayout="column", как показано ниже -

<div style="overflow-y:auto; height:100px">
          <div style="height:3000px;background:red;">
            Why is doesn't this scroll?
          </div>
</div>

Обновите

Если ваш верхний и нижний колонтитулы имеют фиксированный размер ( 100 пикселей в примере ниже), тогда вы можете использовать calc() -

<div style="overflow-y:auto; height:calc(100vh - 100px)"> 
              <div style="height:3000px;background:red;">
                Why is doesn't this scroll?
              </div>
    </div>

Вы также можете установить top и bottom для div и установить позицию на fixed. Div требуется некоторая информация (высота, верх, низ и т. Д. c), чтобы он стал прокручиваемым -

<div style="overflow-y:auto; position:fixed; top:50px; bottom:50px; width:100%">
      <div style="height:3000px;background:red;">
        Why is doesn't this scroll?
      </div>
  </div>