如何缩小弹性物品的高度以适合容器的高度

Question

我正在尝试在flex中显示下面的布局。

我有相等的宽度和高度的股利。 我想实现下面的布局。 将一件物品放在左边，其余四件放在右边的容器中，并在此过程中保持相同的容器高度。 多数民众赞成在左侧增加以填充左侧的高度和宽度，而容器的另一右侧尺寸在四个项目之间共享。

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

我的布局显示的接近我的预期，右边的容器中有四个，左边的一项。 但是，交易容器垂直滚动以适应四个交易高度。 交易不会收缩以适合.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>