如何缩小弹性项目高度以适应容器高度

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>

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