css – 将可滚动元素上的内部div的宽度设置为可滚动宽度的100％

如何使此内容div的宽度等于可滚动区域的宽度？

<div class="scrollable">
    <div class="content">short</div>
    <div class="content">very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text</div>
</div>

用CSS：

.scrollable {
    width: 300px;
    height: 300px;
    overflow: auto;
}

.content {
    background-color: lightblue;
    white-space: Nowrap;
}

jsfiddle：http://jsfiddle.net/XBVsR/12/

问题：如果你滚动,你可以看到背景并没有像往常一样.

我试过设置宽度：100％,溢出：可见等,但无济于事.

编辑：我已经更新,以明确我不希望文本包装 – 我希望整个事情的水平滚动.

解决方法

你可以使用display：table-row;对于嵌套的div.看看 jsfiddle