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

我有一个具有固定宽度的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.当您向右滚动时,您可以看到子元素背景颜色小于内容.

解决方法

只需添加最小宽度并将其显示为内联块：

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

JSFiddle Demo

答案2：
要在注释中回答您的问题,您需要将内容包装在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>

原文地址：https://www.jb51.cc/html/226899.html