flex布局中如何实现自适应内容高度的可复用垂直分割线

你遇到的问题核心是height: 100%的生效限制：百分比高度要求父元素有明确的高度定义，如果父元素高度是由内部内容动态撑开的，这个属性就会失效，你之前用行内固定高度可以生效就是因为给了明确高度值，但无法适配不同高度的场景。

推荐用Flex布局方案实现自适应高度的垂直分割线，不需要给父元素设置固定高度，就能自动适配父容器的实际高度：

修改后的CSS代码 #

.horizontal-rule {
  height: 1px;
  background: grey;
  border: none;
  flex-shrink: 0;
  margin: 0;
}

.vertical {
  width: 1px;
  margin: 0 1rem;
  height: auto;
  /* 核心属性：Flex子元素自动拉伸撑满父容器高度 */
  align-self: stretch;
}

使用要求 #

只要把垂直分割线放在Flex布局的父容器内即可，父容器高度会由其他内容自动撑开，分割线会自动匹配父容器高度，不需要额外传入任何行内样式。

如果你的场景不能用Flex布局，也可以用绝对定位方案实现：给父元素设置position: relative，再给.vertical类添加如下样式：

.vertical {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px; /* 按需调整分割线的水平位置 */
  width: 1px;
  background: grey;
  margin: 0;
}

这个方案需要父容器预留出分割线的水平位置，灵活度略低于Flex方案。

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