角弹性布局之争答案

【问题标题】：Angular flex-layout struggle角弹性布局之争
【发布时间】：2018-12-04 23:19:07
【问题描述】：

我在使用 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 的高度随着窗口大小的变化而变化，因此我不能只硬编码第二个 div 的高度。

您对如何实现这一点有任何建议吗？

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

谢谢:)

【问题讨论】：

将高度添加到 100% 并溢出到您在第二个 flex div 内渲染的列表中的自动，例如 overflow: auto; height: 100%; 并修复主容器的高度。 height:300px 到 div 包含 flexLayout='column'
类似问题：stackoverflow.com/questions/34194042/….

标签： html css flexbox angular-flex-layout

【解决方案1】：

好的，所以我找到了解决方案：https://stackoverflow.com/a/47628145/4763826 (Stack sn-p 2)

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

【讨论】：

【解决方案2】：

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

【讨论】：