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

Question

如何使此内容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%,溢出:可见等,但无济于事.

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

Answer 1

您可以使用display: table-row;嵌套div.看着jsfiddle