将可滚动元素上的内部div的宽度设置为可滚动宽度的100％ [英] set width of inner div on scrollable element to 100% of scrollable width

问题描述

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

How do I get the width of this inner content div to be equal to the width of the scrollable area?

<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/

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

问题：

我已经尝试设置宽度：100％，overflow：visible，如果你滚动，你可以看到背景不会一路穿过，因为它应该。

I've tried setting width: 100%, overflow: visible, etc, to no avail.

编辑：我已更新，明确表示我不想让文字换行

I've updated to make clear that I don't want the text to wrap - I want the horizontal scroll on the whole thing.

推荐答案

您可以使用 display：table-row; code>用于嵌套div。查看 jsfiddle

You can use display: table-row; for nested divs. Look at jsfiddle

这篇关于将可滚动元素上的内部div的宽度设置为可滚动宽度的100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！