Angular flex-layout struggle

Question

I'm running in to some problems while using flex-layout.

My code generally look as follows:

<div fxLayout='column'>
  <!-- multiple rows here -->
  <div fxLayout='row'>
    <div fxFlex='35'>
      <!-- some content here -->
    </div>
    <div fxFlex>
      <!-- mat-list here -->
    </div>
  </div>
  <!-- multiple rows here -->
</div>

I want the second flex div to have the same height as the first. The problem is that the second div contains a list with a lot of entries, which results in two (very) long boxes. Therefore I wanted to make the second div scrollable (overflow:scroll). But I guess that that is not possible because the flex always want to stretch according to the content inside it, i.e. no overflow.

The height of the first div changes with window resizing, therefore I cannot just hardcode the height of the second div.

Do you have any suggestions on how to make this possible?

Please comment if something is unclear, and I will try to elaborate.

Thanks :)

Answer 1

Okay, so I found a solution: https://stackoverflow.com/a/47628145/4763826 (Stack snippet 2)

Basically, I added an extra wrapper div with position: relative, and then added position: absolute; top: 0; bottom: 0; right: 0; left: 0; overflow: scroll; to the list element, which worked out