如何使我的頂部塊佔用額外的空間使用flexbox

Question

是否可以使用柔性箱，因此在我的小提琴示例中，頂部框（粉紅色框）的高度和底部框（橙色框）內容坐在頂盒下方？

我嘗試將display:flex應用於子元素，但是爲底層內容創建了一個新列。

https://jsfiddle.net/b9eyzap3/1/

.box-container { 
 
    display: flex; 
 
} 
 

 
.box { 
 
    //display: flex; 
 
    width: 33%; 
 
} 
 

 
.top { 
 
    background-color: pink; 
 
} 
 

 
.bottom { 
 
    background-color: orange; 
 
}

<div class="box-container"> 
 
    <div class="box"> 
 
    <div class="top"> 
 
     box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1 box 1 
 
    </div> 
 
    <div class="bottom"> 
 
     second block 
 
    </div> 
 
    </div> 
 

 
    <div class="box"> 
 
    <div class="top"> 
 
     box 2 box 2 box 2 box 2 box 2 box 2 box 2 box 2 box 2 box 2 
 
    </div> 
 
    <div class="bottom"> 
 
     second block 
 
    </div> 
 
    </div> 
 

 
    <div class="box"> 
 
    <div class="top"> 
 
     box 3 box 3 box 3 box 3 box 3 box 3 box 3 box 3 box 3 box 3 box 3 box 3 box 3 box 3 box 3 box 3 box 3 box 3 
 
    </div> 
 
    <div class="bottom"> 
 
     second block 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

要在頂級添加以下內容：

flex:1;

添加下列內容框類

display:flex; 
flex-direction:column;