將一排CSS Flexbox容器的高度設置爲特定容器的高度

Question

是否可以讓一排容器的Flexbox實現的總高度等於特定容器的高度？我現在基本的CSS實現是：

.flex-container { 
    display: flex; 
    flex-direction: row; 
    align-items: stretch; 
} 

具有以下HTML：

<div class="flex-container"> 
    <div class="left-container"> 
    stuff 
    </div> 
    <div class="right-container"> 
    some other stuff 
    </div> 
</div> 

的問題是，.right-container可以得到那座高度明智的。所以我想限制.flex-container爲.left-container的高度，無論它的最終高度如何（我不知道提前知道）。這樣，.right-container結束了一個滾動條。

這是僅僅通過CSS這個可能，或者我需要Javascript嗎？如果有幫助，我不一定非要在這裏使用flexbox，但是除了這個高度問題，我發現它在我的應用程序中使用最方便。

Answer 1

如果在.left-container上設置了3個元素的高度並將overflow-y設置爲scroll，那就應該這樣做。

.flex-container { 
 
     display: flex; 
 
     flex-direction: row; 
 
     align-items: stretch; 
 
     border: solid 1px grey; 
 
     padding: 5px; 
 
    height: 150px; 
 
    } 
 

 
    .left-container { 
 
     border: solid 1px red; 
 
     flex: 1; 
 
     height: 150px; 
 
    } 
 

 
    .right-container { 
 
     border: solid 1px blue; 
 
     flex: 3; 
 
     height: 150px; 
 
     overflow-y: scroll; 
 
    }

<div class="flex-container"> 
 
     <div class="left-container"> 
 
     stuff 
 
     </div> 
 
     <div class="right-container"> 
 
     some other stuff some other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuff 
 
     </div> 
 
    </div>

Answer 2

.flex-container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: stretch; 
 
    width:300px; 
 
    height:300px; 
 
    border:1px solid #000; 
 
} 
 

 
.left-container{ 
 
    background-color:red; 
 
    } 
 
.right-container{ 
 
    background-color:green; 
 
    }

<div class="flex-container"> 
 
    <div class="left-container"> 
 
    stuff 
 
    </div> 
 
    <div class="right-container"> 
 
    some other stuff 
 
    </div> 
 
</div>