使子div扩展到溢出内容的宽度

Question

I'm messing around with a code searching ui that lists matched lines by file along with the surrounding code. The matched lines and their surroundings are listed inside a container div with overflow: auto so that the code can be scrolled.

Here is how the html and css are laid out:

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

The problem is that when the content within the .line divs extends beyond the .container , the borders on the .match elements only extend to the width of the .container .

Is there any way to make the .match elements extend to the entire width of the container so that the border extends the entire width of the scrollable area?

Answer 1

The secret that you are missing is that both .match and .line need to automatically expand to 100% width of the child .

The easiest way to solve this is with display: inline :

.match, .line {
  display: inline;
}

I've created a new fiddle showcasing this here .

Hope this helps! :)

Answer 2

You can set display: table-row on .match , and set the border on .line

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

jsFiddle

or

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

jsFiddle

Answer 3

I don't have your entire code so I can't exactly test what you're trying to do properly. However, it appears you're missing "width: 100%" on the .match and .line. Note that 100% is 100% of the parent, not of the viewport.

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