* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  width: 500px;
  height: 500px;
  margin-bottom: 30px;
}

.item {
  color: #fff;
  text-align: center;
  flex-grow: 1;
  flex-basis: 0;
}

.wrap-bc {
  display: flex;
  height: calc(100% / 3);
}

.wrap-abc {
  display: flex;
  flex-direction: column;
  flex-grow: 3;
  flex-basis: 0;
}

.wrap-abcd {
  display: flex;
  height: 60%;
}

.wrap-ef {
  display: flex;
  height: 40%;
}
 
.a {
  background-color: royalblue;
}

.b {
  flex-grow: 2;
  background-color: slateblue;
}

.c {
  background-color: orange;
}

.d {
  flex-grow: 2;
  background-color: gold;
}

.e {
  flex-grow: 2;
  background-color: salmon;
}

.f {
  flex-grow: 3;
  background-color: seagreen;
}