可滚动容器内的全宽子元素

Question

我有一个具有固定宽度的div容器,并且一些子元素可能比父元素大.

是否可以让所有子元素从parent-element(overflow: auto)中获取可滚动区域的整个宽度？

#container {
    width: 200px;
    background-color: grey;
    overflow:auto;
    margin:10px;
}

#container p{
    display:block;
    background-color: green;
    white-space: nowrap;
    width: 100%;
}

<div id="container">
    <p>Sample Text 1</p>
    <p>Sample Text 2</p>
    <p>A very very very very very long Sample Text</p>
</div>

这是小提琴.向右滚动时,您可以看到子元素background-color小于内容.

Answer 1

将内容包装在div中,并将其设置为display: inline-block:

#container {
  width: 200px;
  background-color: grey;
  overflow: auto;
  margin: 10px;
}

#container>div {
  display: inline-block;
}

#container p {
  display: block;
  background-color: green;
  white-space: nowrap;
}

<div id="container">
  <div>
    <p>Sample Text 1</p>
    <p>Sample Text 2</p>
    <p>A very very very very very long Sample Text</p>
  </div>
</div>