使用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>