如何修改Flexbox让音乐播放进度条填满容器整行？

问题背景 #

制作音乐播放进度条时，设置#progress宽度为100%后，始终无法填满.progress-bar容器。原因是原Flex布局下，同级的进度点#progress-dot会占用部分容器空间，导致进度条被挤压。需要实现进度条填满容器的同时，让进度点精准停在进度条末端。

解决方法 #

核心思路是将进度点嵌套进进度条内部，通过绝对定位让它依附在进度条末端，不再占用容器的布局空间。

修改后的代码 #

CSS代码

.progress-bar {
  width: 50%;
  margin: 20px auto;
  background-color: #b3b3b3;
  height: 10px;
  border-radius: 10px;
}

#progress {
  background-color: #535353;
  height: 100%;
  width: 100%;
  border-radius: 10px;
  position: relative; /* 作为进度点的定位父容器 */
}

#progress-dot {
  position: absolute;
  right: 0; /* 对齐进度条右端 */
  top: 50%;
  transform: translate(50%, -50%); /* 让圆点中心与进度条末端对齐 */
  height: 25px;
  width: 25px;
  background-color: #000000;
  border-radius: 50%;
}

HTML代码

<div class="progress-bar">
  <div id="progress">
    <div id="progress-dot"></div>
  </div>
</div>

原理说明 #

1. 移除.progress-bar的Flex布局：进度点不再是同级元素，无需Flex分配空间，进度条可以完全填满容器。
2. 绝对定位进度点：将#progress-dot设为绝对定位，以#progress为父容器，通过right:0定位到进度条末端，再用transform调整位置，让圆点中心与进度条右端对齐，视觉效果更自然。
3. 这种结构也方便后续通过JS动态修改#progress的宽度时，进度点会自动跟随进度条末端移动，无需额外调整位置。

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