使Child Div扩展到溢出内容的宽度

Question

我正在用一个代码搜索UI，该代码与周围的代码一起列出了匹配的线路。匹配的线及其周围环境在带有overflow: auto的容器Div中列出，以便可以滚动代码。

这是HTML和CSS布置的方式：

.container {
  width: 200px;
  overflow: auto;
  border: 2px solid #CCC;
}
.match:first-child {
  border-top: none;
}
.match {
  border-top: 1px solid red;
}
span {
  white-space: pre;
}

<div class="container">
  <div class="match">
    <div class="line">
      <span>This content is so long that it ends up going beyond the edge of the container. Good thing we are using overflow: auto so we can scroll!</span>
    </div>
    <div class="line">
      <span>Another line that is too long to fit into the container.</span>
    </div>
    <div class="line">
      <span>There can be many lines in each match, but the border should only be between the matches, not the lines.</span>
    </div>
  </div>
  <div class="match">
    <div class="line">
      <span>The second line. Does it matter how long this line is? Will the line border extend now that this line is overflowing?</span>
    </div>
  </div>
</div>

问题是，当.line Divs中的内容延伸到.container之外时，.match元素上的边界仅扩展到.container的宽度。

有什么方法可以使.match元素扩展到容器的整个宽度，以便边框扩展可滚动区域的整个宽度？

Answer 1

您可以在.match上设置display: table-row，并在.line

上设置边框

.match {
  display: table-row;
}
.match ~ .match .line:first-child {
  border-top: 1px solid red;
}

jsfiddle

或

.match {
  display: table-row;
}
.match:not(:first-child) .line:first-child {
  border-top: 1px solid red;
}

jsfiddle

Answer 2

您缺少的秘密是.match和.line都需要自动扩展到 CHILD 的100％宽度。

解决此问题的最简单方法是使用display: inline：

.match, .line {
  display: inline;
}

我已经创建了一个新的小提琴，在这里展示了这个。

希望这会有所帮助！：）

Answer 3

我没有您的整个代码，因此我无法精确地测试您要正确完成的操作。但是，似乎您在.match和.line上缺少"宽度：100％"。请注意，100％是父母的100％，而不是视口。

.match, .line {
    width: 100%;
}