如何在CSS Flex容器中创建自适应高度的垂直分隔线？

要实现自适应容器高度90%的垂直分隔线，核心是让分隔线的父元素能获取到Flex容器的完整高度，再设置百分比高度。之前百分比高度无效是因为align-items: center让分隔线父元素高度被收缩，没有明确的高度参考。

修改后的代码方案： #

CSS：

.background {
  background-color: #aaaaaa;
  padding: 10px;
}
.block {
  background-color: white;
  display: flex;
  flex-direction: row;
  /* 移除align-items:center，使用默认的stretch让子元素撑满容器高度 */
  padding: 5px 15px;
}
/* 让左右内容块保持内部垂直居中 */
.block > div:not(.divider) {
  display: flex;
  align-items: center;
}
.divider {
  display: flex;
  align-items: center; /* 让分隔线垂直居中 */
}
.divider span {
  border-left: 3px solid red;
  margin: 0 10px;
  height: 90%; /* 现在能基于父元素高度计算，自适应容器 */
}

HTML（无需修改）：

<div class="background">
  <div class="block">
    <div>
      Left part<br>2nd line
    </div>
    <div class="divider">
      <span></span>
    </div>
    <div>
      Right part<br>2nd line
    </div>
  </div>
</div>

更简洁的替代方案（去掉多余的span）： #

如果不想用嵌套的span，可以直接把.divider作为分隔线元素：

.background {
  background-color: #aaaaaa;
  padding: 10px;
}
.block {
  background-color: white;
  display: flex;
  flex-direction: row;
  padding: 5px 15px;
}
.block > div:not(.divider) {
  display: flex;
  align-items: center;
}
.divider {
  width: 3px;
  background-color: red;
  margin: 0 10px;
  align-self: center; /* 让分隔线垂直居中 */
  height: 90%;
}

对应的HTML修改为：

<div class="background">
  <div class="block">
    <div>
      Left part<br>2nd line
    </div>
    <div class="divider"></div>
    <div>
      Right part<br>2nd line
    </div>
  </div>
</div>

两种方案都能让分隔线高度自适应容器的90%，并且随容器内容高度变化而缩放，同时保持左右内容的垂直居中效果。

内容的提问来源于stack exchange，提问作者sina