当父级溢出时如何使子级div占用所有水平空间：滚动答案

【问题标题】：How to make a child div take up all the horizontal space when the parent has overflow: scroll当父级溢出时如何使子级div占用所有水平空间：滚动
【发布时间】：2020-09-13 08:59:48
【问题描述】：

我希望有一个子 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

【问题讨论】：

标签： html css

【解决方案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 添加到子类，它就可以工作

【讨论】：

请选择它接受，如果它适合你想要的方式。
感谢您的回答！我更新了我的问题，不清楚是否有多个孩子并且所有孩子都必须具有相同的宽度。当您有多个孩子时，此解决方案不起作用
我的问题中的一个要求是“所有子元素必须具有相同的宽度”，这个要求没有得到满足。澄清一下，所有子元素的宽度必须与父 div 相同
我确实错过了，再次更新了代码，我猜这应该是最终的。