Угловая флексо-макетная борьба - PullRequest
0 голосов
/ 26 июня 2018

Я сталкиваюсь с некоторыми проблемами при использовании flex-layout.

Мой код обычно выглядит следующим образом:

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

Я хочу, чтобы второй flex div имел такую ​​же высотукак первый.Проблема заключается в том, что второй div содержит список с большим количеством записей, что приводит к двум (очень) длинным полям.Поэтому я хотел сделать второй div прокручиваемым (overflow:scroll).Но я предполагаю, что это невозможно, потому что flex всегда хочет растягиваться в соответствии с содержимым внутри него, то есть без переполнения.

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

Есть ли у вас какие-либо предложения о том, как сделать это возможным?

Пожалуйста, прокомментируйте, если что-то неясно, и я постараюсь уточнить.

Спасибо :)

Ответы [ 2 ]

0 голосов
/ 25 июля 2018

Хорошо, поэтому я нашел решение: https://stackoverflow.com/a/47628145/4763826 (фрагмент стека 2)

По сути, я добавил дополнительный div-обертку с position: relative, а затем добавил position: absolute; top: 0; bottom: 0; right: 0; left: 0; overflow: scroll; в списокэлемент, отработанный

0 голосов
/ 20 июля 2018

исправить высоту основного контейнера и установить высоту списка на 100% и переполнить на авто.

<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>
...