Question

现在我有一个包含两个项目的弹性列，我试图弄清楚如何获得我正在寻找的行为。特别是，我试图强制执行其中的项目具有一定的最小和最大高度。

第一项item1位于首位。它应该增长到包含所需的垂直空间，但在任何情况下都不应低于50％;如果内容大于此值，则应垂直滚动。
第二项item2位于中间。它不大于其内容，但在任何情况下都不应超过50％;如果内容大于此值，则应垂直滚动。
在item1超过50％，但item2没有超过50％的情况下，item2不应缩小，以使其小于其内容。 item1应该开发一个垂直滚动条。
如果item1和item2两个内容都在内容中爆发（太多而无法容纳在可用空间中），那么它们都应占用可用空间的50％。也就是说，item2的增长优先于item1的增长。
整个栏目应始终保持在固定的高度。

（我保证我不会苛刻，我只是想要真正超级具体！）

这是我目前拥有的SCSS代码：

.column {
  display: flex;
  flex-direction: column;

  .item1 {
    flex: 1 1 auto;
    overflow-y: scroll;
  }

  .item2 {
    flex: 0 1 auto;
    overflow-y: scroll;
  }
}

这让我大部分都在那里，但是如果两个项目失去控制，item2最终会成长为超越item1。此外，在只有item1变得过大的情况下，item2会缩小，而我却不会这样做。

但总而言之，并且真正回答了这个问题中最紧迫的部分，我可以将最高高度和最低高度与Flexbox结合使用，以及如何使用？只需添加min-height和{ {1}}似乎无效。

编辑：有人要求提供一个有效的例子。这应该有效，但可能会让你失明。

https://jsfiddle.net/TheSoundDefense/oxykdhpt/1/

编辑2：代码现在孤立max-height和item1，使item2无关紧要，因此我删除了它。

Answer 1

让我们看看你想要的是什么。

我已从第2项中删除了弹性基础，并以某种方式调整了样式

＆＃13;

.column {
  display: flex;
  flex-direction: column;
  height: 500px;
}
.column .item1 {
  background-color: red;
  flex: 1 0 50%;
  overflow-y: scroll;
}
.column .item2 {
  background-color: blue;
  flex-grow: 0;
  flex-shrink: 1;
  max-height: 50%;
  overflow-y: scroll;
}
textarea {
  resize: vertical;
}

＆＃13;

<div class="column">
  <div class="item1">
    <textarea></textarea>
  </div>
  <div class="item2">
    <textarea></textarea>
  </div>
</div>

＆＃13;

使用Flexbox

1 个答案: