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

Question

我正试图在flex下面显示一个布局。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我的布局显示接近我的预期。右边的容器中有四个，左边是一个项目。但是，交易容器垂直滚动以适应四个交易高度。交易不会缩小以适应.layout-container 5-2-2的正确容器。请问如何缩小四个以修复容器高度？任何帮助将不胜感激。

Answer 1

试试这个

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;