如何修改flexbox以使一个元素填满整行[关闭]

Question

尝试制作一个进度条（用于音乐播放），但是当#progress bar的宽度为100%时，它没有填满整个容器.progress-bar（如图所示）（浅灰色部分描绘了整个容器）期间）。我认为这是由于 Flexbox 造成的，因为点填充了部分空间，但不知道解决方法，以便点保留在 #progress 的末尾。

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

#progress {
  background-color: #535353;
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 10px;
}

#progress-dot {
  position: relative;
  height: 25px;
  width: 25px;
  transform: translate(-12.5px, -7px);
  background-color: #000000;
  border-radius: 50%;
}

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

图片

Answer 1

问题是拇指位于进度容器内，因此必须在弹性容器中为其留出空间。

transform

纯属视觉效果，不影响实际布局。

我建议通过绝对定位将其从流程中“删除”。

.progress-bar {
  display: flex;
  flex-direction: row;
  width: 50%;
  margin: 20px auto;
  background-color: #b3b3b3;
  height: 10px;
  border-radius: 10px;
  position: relative;
}

#progress {
  background-color: #535353;
  height: 100%;
  width: 100%;
  /* equivalent to value */
  border-radius: 10px;
}

#progress-dot {
  position: absolute;
  left: 100%;
  /* equivalent to value */
  height: 25px;
  width: 25px;
  transform: translate(-50%, -7px);
  background-color: #000000;
  opacity: .25;
  border-radius: 50%;
}

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