html - 让 child 占据 parent 溢出的宽度

Question

我在显式宽度的父项中有许多子项，例如

document.querySelector('.parent').scrollTo(100,0)

.parent {
  overflow: auto;
  width: 200px;
}
.child {
  font-size: 40px;
  background-color: blue;
  white-space: nowrap;
}

<div class='parent'>
  <div class='child'>asdf asdf adsf asdf</div>
  <div class='child'>asdf</div>
  <div class='child'>asdf</div>
  <div class='child'>asdf</div>
  <div class='child'>asdf</div>
  <div class='child'>asdf</div>
</div>

我希望 child 元素背景覆盖整个 child 。但是它不会超出初始可见区域。您可以在下图中水平滚动父项的位置看到我的意思:

Answer 1

尝试在 .child 元素上添加 display: inline-block;