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

【问题标题】：Full width child elements inside scrollable container可滚动容器内的全宽子元素
【发布时间】：2019-02-13 01:56:14
【问题描述】：

我有一个固定宽度的 div 容器，一些子元素可能比父元素大。

是否可以让所有子元素从父元素 (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>

这里是fiddle。向右滚动可以看到child-elements background-color小于内容。

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

是的，这适用于大的，但我想让所有的子元素全宽。
你的意思是，你想让所有的孩子都和最宽的孩子一样宽？
哇，谢谢！这可能很容易，但我没有尝试更改 html 结构。 +1
没问题 :D 有时，您必须更改 HTML 以获得所需的内容
aaaaa 我刚刚花了几个小时在这上面！终于找到合适的搜索词带我到这个答案，谢谢:)

【解决方案2】：

您可以将子元素设置为display:table-row;

#container {
    width: 200px;
    background-color: grey;
    overflow: auto;
}
#container p {
    display: table-row;
    background-color: green;
    white-space: nowrap;
}

<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>

如果您需要额外的样式控件，请添加额外的<div>。

#container {
    width: 200px;
    background-color: grey;
    overflow: auto;
}
#container div {
    display: table;
    border-spacing: 0 10px;
}
#container p {
    display: table-row;
    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>

【讨论】：

【解决方案3】：

您可以使用 from absolute position 属性来做到这一点。

#container {
    width: 200px;
    background-color: grey;
    overflow:auto;
    margin:10px;
}
#container p{
    display:block;
    background-color: green;
    white-space: nowrap;
    position:absolute;
}

【讨论】：