html - Angular flex-layout 斗争

Question

我在使用 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 总是希望根据其中的内容进行拉伸(stretch)，即不会溢出。

第一个 div 的高度随着窗口大小的变化而变化，因此我不能只对第二个 div 的高度进行硬编码。

对于如何实现这一点，您有什么建议吗？

如有不明白的地方请评论，我会尽量详细说明。

谢谢 :)

Answer 1

固定主容器的高度并将列表的高度设置为 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>