html - Block A 全高在左侧，带 flex

Question

<分区>

Answer 1

您还必须适应应用于该元素的填充和边距。使用 calc()

尝试以下操作

.container,
html,
body {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
}

.item,
.block {
  background-color: red;
  margin: 5px;
  padding: 5px;
}

.itemA {
  width: 30px;
  height: calc(100vh - 20px);
  float: left;
}

.itemB {
  flex: 0 0 100px;
  display: flex;
}

.block {
  flex: 1;
  display: none;
}

.itemD {
  flex: 1;
}

.itemB1,
.itemB2,
.itemB3 {
  flex: 1;
}

<div class="item itemA">
  A
</div>

<div class="container">

  <div class="itemB">
    <div class="item itemB1">
      B1
    </div>
    <div class="item itemB2">
      B2
    </div>
    <div class="item itemB3">
      B3
    </div>
  </div>

  <div class="block blockB1">
    Block B1
  </div>
  <div class="block blockB2">
    Block B2
  </div>
  <div class="block blockB3">
    Block B3
  </div>
  <div class="block blockD">
    Block D
  </div>

  <div class="item itemD">
    D
  </div>

</div>