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

【问题标题】：set width of inner div on scrollable element to 100% of scrollable width将可滚动元素上的内部 div 的宽度设置为可滚动宽度的 100%
【发布时间】：2013-07-01 13:45:20
【问题描述】：

如何让这个内部内容 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%，溢出：可见等，都无济于事。

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

【问题讨论】：

你需要为每个文本单独设置背景吗？设置可滚动背景不是更容易吗？
@Ms.Nobody，是的，我需要单独设置它们，因为它们实际上是带有背景和边框的可滚动菜单的一部分，这只是一个用于隔离问题的简单示例。
所以你想要一个必须滚动的菜单？你能把整个东西放在某个地方吗？或者只是菜单但带有真实项目，因为我不明白为什么你希望菜单可以垂直滚动：D

标签： html css

【解决方案1】：

您可以将display: table-row; 用于嵌套 div。看jsfiddle

【讨论】：

简洁优雅，太好了！
完美！干杯伙计！为什么要显示的任何想法：阻止；没有工作，而 display: table-row 工作？
我不知道浏览器渲染引擎应该如何工作。但我猜当溢出发生时，浏览器不会考虑嵌套 block 的宽度，背景将在该宽度上呈现。如果使用table-row，则将考虑包含的文本宽度来计算宽度。
:/ 我遇到了这种情况，flex box 会发生这种情况，所以我已经有了display: flex。那我猜我得想出一些老生常谈的解决方案了。
用display: table-row如果内部DIV太小，它不会被拉伸到外部DIV的全宽。所以这个答案并没有真正解决“将可滚动元素上的内部 div 的宽度设置为可滚动宽度的 100%”的问题。它也不允许设置padding。 jsfiddle.net/8rsptwxu

【解决方案2】：

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

 overflow: auto;

【讨论】：

这只是滚动单个内容元素，但我需要滚动整个内容。

【解决方案3】：

如果您要将外部 div 设置为宽度 300 像素，则不能。这是打破边界框的完整文本。但是，您可以通过将其添加到内容 CSS 中来换行：

word-wrap: break-word;

但是，如果 300px 对您来说无关紧要，您可以将 overflow: auto 从可滚动类移动到内容类，这也应该可以解决背景问题。

【讨论】：

【解决方案4】：

添加到 .content 类

overflow: auto;

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

请记住，这将影响所有具有类 .content 的元素。你可能也想给它另一个类名。

【讨论】：

我认为他想要卷轴
@MadanlalArora 是正确的，我需要它来滚动。我实际上也有 white-space: nowrap 以确保它滚动。
@MadanlalArora “这个内部内容 div 的宽度等于可滚动区域的宽度”，可滚动是父类。所以，我相信目标是让宽度相等。
老兄检查一下我在我的回答中给出的小提琴是否解决了你的问题？
@Jaay 在这种情况下，您需要将 overflow: auto 添加到子元素。检查更新。

【解决方案5】：

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

外部嵌套的div 应该有display: table，也应该有min-width: 100%; 和min-height: 100%;，而最里面的嵌套div 应该有display: table-cell。

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

它还允许在最里面的 div 上设置paddings。

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

【讨论】：