使用Flexbox的最小和最大高度

Question

现在我有一个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无关，所以我删除它。

Answer 1

让我们来看看这是你想要的。

我从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>