Trying to make a progress bar (for music playback), but when width of the #progress bar is 100%, it doesn't fill up the whole container .progress-bar (as seen in photo)(Light grey part depicts whole duration). I assume this is due to flexbox, as the dot fills up part of the space, but don't know a workaround for this so that the dot stays at the end of #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>