Angular 弹性布局斗争

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 总是想根据它里面的内容来拉伸，即没有溢出。

第一个 div 的高度随 window 调整大小而变化，因此我不能只对第二个 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>

Answer 2

好的，所以我找到了解决方案：（堆栈代码段 2）

基本上，我用 position: relative 添加了一个额外的包装器 div，然后将 position: absolute; top: 0; bottom: 0; right: 0; left: 0; overflow: scroll; 添加到列表元素，结果是

Angular 弹性布局斗争

Angular flex-layout struggle

html

css

flexbox

angular-flex-layout