如何使div在可滚动内容内扩展宽度

Question

的宽度不随其父容器或内容的宽度扩展。没有浮动涉及。父div设置了overflow:scroll和white-space:pre；其他都是正常的。在Firefox、IE/Edge、Opera和Chrome中观察到相同的行为。

div.wrapper {
  padding: 1em;
  width: 20em;
  background-color: rgb(240, 240, 240);
  overflow: scroll;
  white-space: pre;
  font-family: monospace;
}
div.line {
  background-color: rgb(200, 200, 200);
}
div.line span.blue {
  color: blue;
}
div.line span.green {
  color: green;
}

<div class='wrapper'>
  <div class='line'>This text is too <span class="blue">long</span> for the wrapper div to <span class="green">contain</span>, so the scroll bar activates.</div>
  <div class='line'>However, the line div's background color fails to <span class="blue">expand</span> with the longer contents, instead ending at the wrapper div's width. Why?</div>
</div>

div.line 的背景颜色在页面上延伸到 div.wrapper 的宽度。但是，当用户向右滚动时，文本会正常显示，而 div.line 的背景颜色则结束了。

我需要的是每个 div.line 都与 div.wrapper 的“内部”宽度一样宽（以填充可滚动区域）。

失败的解决方案：

• 设置 overflow:hidden - 这会隐藏溢出的内容，而不是调整 div 的大小

• 设置 overflow:auto - 没有任何区别

• 添加 <div style="clear:both"> </div> - 没有任何区别（没有浮动！）

• 设置 after:...clear:both - 没有任何区别，如上所述

• 在父/子元素上设置高度 - 没有任何区别

• 设置 width:auto - 没有任何区别

我已经研究了这个问题，直到我的大脑都疼了。我真的希望我漏看了什么明显的东西。

- Michael Galindo

Answer 1

终于搞定了！这个问题很棘手，一直困扰着我，所以我不得不解决它。只需要调整一些显示值，直到看起来正确为止。还将white-space属性移动到行类中。https://jsfiddle.net/0yr0xg35/1/

div.wrapper {
  padding: 1em;
  width: 20em;
  background-color: rgb(240, 240, 240);
  overflow: scroll;
  font-family: monospace;
}
div.line {
  display: table-row;
  white-space: pre;
  background-color: rgb(200, 200, 200);
}
div.line span.blue {
  color: blue;
}

- Andrew Axton

Answer 2

            div.wrapper {
                padding:1em;
                width:20em;
                background-color:rgb(240,240,240);
                overflow:scroll;
                white-space:pre;
                font-family:monospace;
            }
            div.line {
                background-color:rgb(200,200,200);
                width: 240vh;
            }
            div.line span.blue { color:blue; }
            div.line span.green { color:green; }

<div class='wrapper'>
<div class='line'>This text is too <span class="blue">long</span> for the wrapper div to <span class="green">contain</span>, so the scroll bar activates.  </div>
<div class='line'>However, the line div's background color fails to <span class="blue">expand</span> with the longer contents, instead ending at the wrapper div's width. Why?</div>
</div>

给你的 div 加上一些宽度吧，老兄。试试使用 vh 或 vw 代替 %。
希望这对你有所帮助。

- Chad Trikyas Mooney

---

我的端上运行得很好，哈哈，也许尝试全屏模式？在你的div.line中添加宽度240vh。你可能需要调整数字以适应。这就是我为你的代码添加的全部内容，伙计。 - Chad Trikyas Mooney

不幸的是，这对于动态内容或不同用户无法起作用，因为 240vh 在每个屏幕上会产生不同的大小，并且不会随着内容宽度的变化而改变。 - Michael Galindo

没错，伙计。这可以通过媒体查询来解决lol，或者您可以使用vw，这样它就会根据宽度而不是高度进行更改。例如：您可以在“包装器”中添加font-size: 3vw; 并在“.line”上将240vh换成240vw。这样所有内容都会发生变化。您只需要在媒体查询中调整字体大小和宽度，因为即使在移动设备上，字体大小为3vw也很小，但在中等大小的笔记本电脑上则较大。它与PHP动态地运行得很好，抱歉回复晚了。 - Chad Trikyas Mooney

Answer 3

将 width 改为 min-width：

min-width: 20em;

并删除：

white-space: pre;

- user2182349