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

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

如果有不清楚的地方请发表评论，我会尽力阐述。

谢谢:)

Answer 1

固定主容器的高度，并将list的高度设置为100％，并溢出到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>

Answer 2

好的，所以我找到了一个解决方案：https://stackoverflow.com/a/47628145/4763826（堆栈片段2）

基本上，我用position: relative添加了一个额外的wrapper div，然后将position: absolute; top: 0; bottom: 0; right: 0; left: 0; overflow: scroll;添加到了list元素上，就可以解决

角形柔性版图斗争

2 个答案: