コンテナの高さに合わせてフレックスアイテムの高さを縮小する方法

Question

フレックスで以下のレイアウトを表示しようとしています。

Iは同じ幅と高さのdivを有します。私は以下のレイアウトを達成したい。 1つのアイテムを左側に配置し、残りの4つを右側のコンテナに合わせ、プロセスの同じコンテナの高さを維持します。左側の高さと幅を埋めるために左側のものが増え、4つのアイテム間でコンテナのもう一方の正しいサイズが共有されます。私は左に右に1つの項目に、容器内に4 expecting.withたものに私のレイアウトが表示近い

.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>

。ただし、取引コンテナは、4つの取引高に対応するように垂直方向にスクロールします。取引は、右の容器thats .layout-container 5-2-2に収まるように収縮しません。どうすれば容器の高さを修正するために4つを縮めるのですか？どんな助けもありがとう。

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>