我有一个具有固定宽度的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>
解决方法
只需添加最小宽度并将其显示为内联块：
#container p{
display:inline-block;
background-color: green;
white-space: nowrap;
min-width: 100%;
}
答案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>
