Question

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

我需要的是每个div.line与div.wrapper＆＃34;内部＆＃34;一样宽。 width（填充可滚动区域）。

解决方案失败：

设置overflow:hidden - 这会隐藏溢出的内容，而不是调整div的大小
设置overflow:auto - 这没有区别
添加<div style="clear:both"> </div> - 没有区别（不涉及花车！）
设置after:...clear:both - 没有区别，如上所述
在父/子元素上设置高度 - 没有区别
设置width:auto - 没有区别

我一直在研究这个，直到我的大脑疼痛。我真的希望我错过了一些明显的东西。

Answer 1

快速解决方案是设置.line {display:table;}，使宽度始终相对于内容而不是容器。并将white-space:pre从.wrapper移至.line以避免不必要的间距。

我还注意到padding上的.wrapper对于可滚动内容确实不起作用（滚动到右边看到）。作为修复，我们可以改为使用border。

<强> jsfiddle

＆＃13;

.wrapper {
  width: 20em;
  border: 1em solid rgb(240, 240, 240);
  box-sizing: border-box;
  overflow-x: scroll;
}
.line {
  background-color: rgb(200, 200, 200);
  font-family: monospace;
  display: table;
  white-space: pre;
}
.line .blue {
  color: blue;
}
.line .green {
  color: green;
}

＆＃13;

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

＆＃13;

如果您需要为所有线条完全应用背景。您可以将行包装到容器中，我添加了<div class="scrollable">并将其设置为display:inline-block; + white-space:nowrap。

<强> jsfiddle

＆＃13;

.wrapper {
  width: 20em;
  border: 1em solid rgb(240, 240, 240);
  box-sizing: border-box;
  overflow-x: scroll;
}
.scrollable {
  background-color: rgb(200, 200, 200);
  font-family: monospace;
  display: inline-block;
  white-space: nowrap;
}
.line .blue {
  color: blue;
}
.line .green {
  color: green;
}

＆＃13;

<div class='wrapper'>
  <div class="scrollable">
    <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>

＆＃13;

Answer 2

＆＃13;

            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; }

＆＃13;

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

＆＃13;

给你的div一些宽度的伴侣。尝试使用：vh或vw而不是％。
希望这有用。

Answer 3

终于搞定了！这是一个很难的，并开始打扰我，所以我不得不解决它。不得不乱用一些显示值，直到它看起来正确。还将白色空间道具移至线类。 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;
}

Answer 4

将宽度更改为 min-width ：

min-width: 20em;

并删除：

white-space: pre;

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

4 个答案: