将一排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>