如何将Flex项目高度缩小以适应容器高度

Question

我想在flex中显示以下布局。

我具有相等的宽度和高度的的div。我想在下面实现布局。通过在左边放置一个物品，其余四个放在正确的容器上，并在此过程中保持相同的容器高度。那就是左边的那个增加来填充左边的高度和宽度，并且容器的其他正确尺寸在四个项目之间共享。

.trades { 
 
    display: flex; 
 
    flex: 1; 
 
} 
 
.trade-panel { 
 
    flex: 1; 
 
} 
 
.layout-5-2 { 
 
    -ms-flex-direction: row; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
    display: flex; 
 
} 
 
.layout-container-5-2-1 { 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    height: 100%; 
 
    justify-content: space-between; 
 
    flex: 0 0 48%; 
 
    display: flex; 
 
} 
 
.layout-container-5-2-2 { 
 
    flex: 0 0 48%; 
 
    display: flex; 
 
    flex-direction: column; 
 
}

<div class="trades"> 
 
    <div class="layout-5-2"> 
 
    <div class="layout-container-5-2-1"> 
 
     <div class="trade-panel">item 1</div> 
 
     <div class=" trade-panel">item 2</div> 
 
     <div class="trade-panel">item 3</div> 
 
     <div class=" trade-panel">item 4</div> 
 
    </div> 
 

 
    <div class="layout-container-5-2-1"> 
 
     <div class="trade-panel">vertical item.</div> 
 
    </div> 
 
    </div> 
 
</div>

我接近我是expecting.with四到容器的右边，一个项目到左的布局显示。但是，交易容器垂直滚动以适应四个交易高度。交易不会缩小以适应.layout-container 5-2-2的正确货柜。请如何缩小四个以固定在集装箱高度？任何帮助，将不胜感激。

Answer 1

试试这个

body, 
 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    display: flex; 
 
    min-height: 100vh; 
 
    background: #2A3052; 
 
} 
 
.left { 
 
    flex: 1; 
 
    background: #9497A8; 
 
    margin: 10px; 
 
} 
 
.right { 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.box { 
 
    flex: 1; 
 
    background: #9497A8; 
 
    margin: 10px; 
 
}

<div class="container"> 
 
    <div class="left"></div> 
 
    <div class="right"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div>