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

Answer 2

添加到.content类

overflow: auto;

此处更新了小提琴：http://jsfiddle.net/XBVsR/11/

请记住，这会影响具有类.content的所有元素。你也许想给它另一个班级名字。

Answer 3

将此内容提供给您的内容

 overflow: auto;

Answer 4

如果您要将外部div设置为宽度为300px，则无法进行此操作。打破边界框的是完整文本。但是，您可以通过将其添加到内容CSS来包装该单词：

word-wrap: break-word;

但是，如果300px并不重要，您可以将overflow：auto从可滚动类移动到内容类，这也应该解决背景问题。

Answer 5

解决方案是使用两个嵌套的内部div而不是一个内部div。

最外面的嵌套div应该具有display: table和min-width: 100%;，同时最里面的嵌套min-height: 100%;应该具有div

这样，如果表格单元格的内容太小，表格将以两种方式（水平和垂直）拉伸到外部可滚动容器的视口，但是如果内容足够大，表格将进一步拉伸。

它还允许在最里面的div上设置display: table-cell。

padding

.outer {
  width: 200px;
  height: 100px;
  overflow: auto;
}

.middle {
  background: lightpink;
  display: table;
  min-width: 100%;
  min-height: 100%;
}

.inner {
  display: table-cell;
  white-space: pre-line;
  padding: 10px;
}

https://jsfiddle.net/4cuzqo06/

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

5 个答案: