css - "overflow-x: scroll; white-space: nowrap"从背景中溢出的父级内的 div 内容

Question

使用以下 HTML/CSS 标记 ( live example )，

<div style="border:solid 1px red; width:200px;padding:10px;padding-right:0;overflow-x:scroll;">
    <div style="width:100%;background:yellow;">text text text text text text text</div>
    <div style="width:100%;background:yellow;">text text text text text text</div>
</div>

内部div的内容会自动换行。我不想要那个。但是，如果我在外部 div 上使用 white-space: nowrap，内部 div 的黄色背景颜色不会延伸到其内容的末尾。

如何修复此标记，使内部 div 的内容不换行并且它们的所有内容都显示在黄色背景上？

Answer 1

这是一个解决方案 seems to do what I think you're asking for :

<div style="border:solid 1px red; width:200px;padding:10px;padding-right:0;overflow-x:scroll;white-space:nowrap">
    <div style="display:inline-block;min-width:100%;background:yellow;">text text text text text text text</div><br>
    <div style="display:inline-block;min-width:100%;background:yellow;">text text text text</div>
</div>

注意 display: inline-block属性(property)，使用min-width而不是 width , 和 <br> div 之间的标记。

不过，老实说，这感觉真的很丑陋。我不禁认为一定有更好的方法来实现这个结果。