當父級溢出時如何使子級div占用所有水平空間：滾動

Question

我希望有一個子 div，其中一行文本，背景顏色覆蓋整行，在父 div 內，最大寬度，並且能夠沿 x 軸滾動。

背景顏色必須在子元素上，因為子元素（有多個子元素）將具有不同的 colors。 所有子元素必須具有相同的寬度。

我只想在子元素上使用 CSS 並且沒有硬編碼數字。

我的問題是子元素沒有覆蓋整行，水平滾動就可以看到問題。

重現我的問題：

.parent {
  width: 400px;
  max-width: 400px;
  overflow: scroll;
}

.child {
  white-space: nowrap;
  background: skyblue;
}

<div class="parent">
  <div class="child">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 
     Aenean massa. 
  </div>
  <div class="child">second child</div>
  <div class="child">third child</div>
</div>

或https://codepen.io/alawiii521/pen/rNObXrm

Answer 1

您可以通過將文本包裝在這樣的跨度中並將顏色添加到跨度來實現此目的。

 .parent { width: 400px; max-width: 400px; overflow: scroll; }.child { white-space: nowrap; display:table-row; background: skyblue; }

 <div class="parent"> <div class="child"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </div> <div class="child">second child</div> <div class="child">third child</div> </div>

編輯：只需將 display:table 添加到子 class，它將起作用