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 :)

add height to 100% and overflow to auto on list you are rendering inside second flex div, like `overflow: auto; height: 100%;` and also fix height of main container. `height:300px` to div containing flexLayout='column' — Ravi Sevta, Jul 20 '18 at 11:39
Similar question: https://stackoverflow.com/questions/34194042/one-flex-item-sets-the-height-limit-for-siblings. — NiK648, Jul 20 '18 at 12:00

score 0 · Answer 1 · answered Jul 20 '18 at 11:50

fix the height of main container and set height of list to 100% and overflow to auto.

<div fxLayout='column' style="height:300px">
  <!-- multiple rows here -->
  <div fxLayout='row'>
    <div fxFlex='35'>
      <!-- some content here -->
    </div>
    <div fxFlex>
      <ul style="height:100%;overflow:auto">
        <li>content</li>
        <li>content</li>
        <li>content</li>
        .......
        <li>content</li>
      </ul>
      <!-- mat-list here -->
    </div>
  </div>
  <!-- multiple rows here -->
</div>

score 0 · Accepted Answer · answered Jul 25 '18 at 06:10

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

Angular flex-layout struggle

2 Answers2