引導容器div中的div重疊-CSS

Question

我正在嘗試創建一個聲音控制欄，該聲音控制欄的下方是一個加載欄，用於顯示播放的當前位置。 例：

這是我的窗口大小為中或大時的樣子。 但是當它變小時，它變成了：

它不僅不再居中，而且將所有內容向左移，位置欄四處流動。 您會注意到位置欄很好，真正的問題出在播放控制div立即縮小並向左移動。 有沒有辦法解決這個問題？

HTML：

<div class="container">
     <div class="playBar row"></div>
     <div class="positionBar row"></div>
</div>

CSS：

.container { position: relative }
.playBar { 
  background-color: rgba(173, 173, 173, 0.55);
  border-radius: 5px;
  height: 50px;
  font-size: 27px;
  background: linear-gradient(to bottom, rgba(207, 207, 207, 0.58) 0%,rgba(134, 134, 134, 0.54) 100%);
  z-index: 1;
  position: absolute;
  width: inherit; 
}
.postionBar { 
  border-radius: 5px;
  background-color: #CC5A5A;
  z-index: 10;
  height: 50px; 
}

Answer 1

如果您在條形圖上設置了min-width ，則它不會縮小到某個特定點。

min-width: 100%;