html - 将可滚动元素上的内部 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/

问题:如果您滚动浏览，您会看到背景没有完全显示。

我试过设置 width: 100%, overflow: visible 等，但无济于事。

编辑:我已经更新以明确我不希望文本换行 - 我想要整个内容的水平滚动。

Answer 1

您可以对嵌套的 div 使用 display: table-row;。看jsfiddle