How to shrink flex items height to fit container heights

问题

I am trying to display a layout below in flex .

I have divs of equal width and height. I want to achieve the layout out below. By placing one item on the left and the remaining four fit on the right container and maintaining the same container height in the process . Thats the one on the left increase to fill the left height and width and the other right size of the container is shared among the four items.

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

My layout displays close to what i was expecting.with four to in the container to the right and one item to the left. However, The trades container scroll vertically to accommodate the four trades height. The trades does not shrink to fit into the right container thats .layout-container 5-2-2. Please how do i shrink the four to fix in the container heights ? Any help would be appreciated.

回答1:

Try this

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>

来源：https://stackoverflow.com/questions/36911248/how-to-shrink-flex-items-height-to-fit-container-heights

标签

html

css

flexbox