javascript - 在Flexbox中使用最小和最大高度

现在，我有一个flex列，其中包含两个项目，并且我试图找出如何获得所需的行为。特别是，我试图强制其中的项目具有一定的最小和最大高度。


第一个项目item1在顶部。它应该增长为包含所需的垂直空间，但在任何情况下都不应收缩到50％以下；如果内容大于此值，则应垂直滚动。
第二项item2在中间。它的含量不大于其含量，但在任何情况下都不应超过50％；如果内容大于此值，则应垂直滚动。
在item1可以拉伸超过50％，但item2不能拉伸的情况下，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和max-height似乎无效。

编辑：有人要求一个可行的例子。这应该可以，尽管它可能会使您失明。

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

编辑2：该代码现在具有item1和item2隔离，使item3不相关，所以我将其删除。

最佳答案

让我们看看这是否是您想要的。

我已经从item2删除了flex基础，并以某种方式调整了样式

.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;
}

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

关于javascript - 在Flexbox中使用最小和最大高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39965769/