将可滚动元素内部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等，但都无济于事。

编辑： 我已更新以明确表明我不希望文本换行 - 我希望整个内容出现水平滚动条。

- magritte

---

你需要为每个文本单独设置背景吗？设置可滚动的背景不是更容易吗？ - Ms. Nobody

@Ms.Nobody，是的，我需要逐个设置它们，因为它们实际上是滚动菜单的一部分，具有背景和边框，这只是一个简单的示例来隔离问题。 - magritte

所以你想要一个需要滚动的菜单？你能把整个东西放在某个地方吗？或者只是菜单，但是有真正的项目，因为我不明白为什么你想要垂直滚动的菜单:D - Ms. Nobody

Answer 1

您可以使用display: table-row;来处理嵌套的div。请参考jsfiddle。

- YD1m

---

简单而优雅，非常棒！ - Jaay

完美！干杯，伙计！你有什么想法，为什么 display: block; 不起作用，而 display: table-row 起作用了吗？ - magritte

我不知道浏览器渲染引擎应该如何工作。但我猜想，当溢出发生时，浏览器不会考虑嵌套块的宽度，这是背景将被渲染的块。如果使用 table-row，则宽度将根据包含文本的宽度进行计算。 - YD1m

我遇到了一个使用flex box时出现的情况，所以我已经设置了display: flex。看来我得想出一些hacky的解决方案了。 - stubailo

使用 display: table-row，如果内部 DIV 太小，则不会拉伸到外部 DIV 的完整宽度。因此，这个答案并没有真正解决“将可滚动元素上的内部 div 宽度设置为可滚动宽度的 100%”问题。它也不允许设置 padding。http://jsfiddle.net/8rsptwxu/ - Ruslan Stelmachenko

Answer 2

如果你要将外部 div 设置为宽度 300px，那么你就无法实现。这是因为未被打断的文本超出了边界框。不过，你可以通过在内容 CSS 中添加以下代码来换行：

word-wrap: break-word;

然而，如果这300像素对您不重要，您可以将overflow: auto从可滚动类移动到内容类中，这也应该解决背景问题。

- GoGoCarl

Answer 3

添加到 .content 类中

overflow: auto;

这里更新了代码片段链接：http://jsfiddle.net/XBVsR/11/

请记住，这会影响所有带有 .content 类的元素。你可能需要给它另一个类名。

- reggaemahn

---

我认为他想要滚动。 - Madanlal Arora

@MadanlalArora 没错，我需要它滚动。实际上，我还有 white-space: nowrap 以确保它滚动。 - magritte

@MadanlalArora “将此内部内容div的宽度设置为可滚动区域的宽度”，其中可滚动区域是父类。因此，我认为目标是使宽度相等。 - reggaemahn

兄弟，检查一下我在答案中提供的代码片段，它能解决你的问题吗？ - Madanlal Arora

@Jaay 在这种情况下，您需要将overflow: auto添加到子元素中。请检查更新。 - reggaemahn

@MadanlalArora 是的，我相信是这样。 - reggaemahn

Answer 4

只需将此内容添加到您的内容中

 overflow: auto;

- Madanlal Arora

---

这只是滚动单个内容元素，但我需要整个内容都可以滚动。 - magritte

Answer 5

解决方法是使用两个嵌套的内部

而不是一个内部

。

外层嵌套的

应具有"display: table"，并且还应具有"min-width: 100%;"和"min-height: 100%;"，而最内层嵌套的

应具有"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;
}

<div class="outer">
  <div class="middle">
    <div class="inner">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong
and another one text
and another one text
and another one text
and another one text
and another one text
and another one text
    </div>
  </div>
</div>

<hr>

<div class="outer">
  <div class="middle">
    <div class="inner">short
    short
    short
    short
    short
    short
    short
    short
    </div>
  </div>
</div>

<hr>

<div class="outer">
  <div class="middle">
    <div class="inner">short</div>
  </div>
</div>

https://jsfiddle.net/4cuzqo06/

- Ruslan Stelmachenko