如何使我的顶部块占用额外的空间使用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;