如何让容器内div仅占必要空间 实现图片间虚线分隔布局

• .div2设置了flex-grow: 1，该属性会让flex子项平分容器所有剩余宽度，直接导致所有子项被均等拉伸，最后一个仅放图片的div也会被分配多余宽度。
• 现有CSS存在语法错误：.hr、.div1的样式块未闭合，会导致部分样式解析失效。
• hr未清除默认样式、也未设置伸缩规则，当父div宽度由内容撑开时，100%宽度的虚线无法获得有效参考宽度，就会出现显示异常。
• .div1设置的绝对定位+left:0;right:0会强制容器撑满整个定位父级宽度，进一步放大了子项均分拉伸的问题。

当前问题效果预览：

核心调整逻辑：

• 移除所有.div2默认的flex-grow:1，仅给前三个带虚线的div设置flex:1，让它们自动填充相邻图片之间的剩余空间，最后一个div默认仅包裹自身内容。
• 清除hr的默认边距和边框，给hr设置flex:1，让虚线自动占满所在div内图片之外的全部宽度，无需依赖父div的固定宽度即可正常显示。
• 修复CSS语法闭合问题，去掉.div1不必要的绝对定位属性，保留flex布局的居中、撑满逻辑即可。

完整修复代码 #

CSS部分 #

.hr {
  /* 清除hr默认样式 */
  margin: 0;
  border: none;
  /* 虚线样式 */
  border-top: 10px dashed black; 
  background-color: transparent;
  /* 让虚线自动填充剩余空间 */
  flex: 1;
}

.div2 {
  display: flex;
  align-items: center;
  padding: 0;
  margin-bottom: 0;
  /* 可选：调整图片和虚线的间距 */
  gap: 8px;
}
/* 仅带虚线的前三个div填充剩余空间 */
.div2:not(:last-child) {
  flex: 1;
}

.div1 {
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

HTML部分 #

<div class="div1">
 <div class="div2">
  <img src="circle.svg">
  <hr class="hr">
 </div>
 <div class="div2">
  <img src="circle.svg">
  <hr class="hr">
 </div>
 <div class="div2">
  <img src="circle.svg">
  <hr class="hr">
 </div>
 <div class="div2">
  <img src="circle.svg">
 </div>
</div>

• 所有图片保持原生尺寸，不会被拉伸变形
• 图片之间的虚线会自动适配容器宽度，始终填满两个图片的间隔区域
• 最后一个仅放置图片的div仅占据自身内容所需宽度，不会出现多余空白
• 无需给任何子元素设置固定宽度，虚线在所有场景下都能正常渲染

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