Как сделать так, чтобы дочерний div занимал все горизонтальное пространство при переполнении родительского элемента: scroll

Question

Я хочу иметь дочерний div с текстом в одной строке, с цветом фона, который покрывает всю строку, внутри родительского div с максимальной шириной и с возможностью прокрутки по оси x.

Цвет фона должен быть в дочернем элементе, потому что дочерние элементы (их несколько) будут иметь разные цвета. Все дочерние элементы должны иметь одинаковую ширину.

Я хочу использовать только 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>

EDIT: просто добавьте display: table в дочерний класс, он будет работать