Make child div expand to width of overflown content

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?

score 0 · Answer 1 · answered Feb 19 '17 at 21:46

0

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! :)

answered Feb 19 '17 at 21:46

Obsidian Age

41,205
10
48
71

It looks like this does make the border extend further than before, but it only goes as far as it's own content. It doesn't extend to the entire width of the scrollable area. – Brian Schlenker Feb 19 '17 at 21:48
Oh, I see what you're asking for now. My apologies; I thought you meant the container of the element, not the whole scrollable content ;) – Obsidian Age Feb 19 '17 at 21:49

Stickers · Accepted Answer · 2017-02-20T01:54:55.310

0

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

edited Feb 20 '17 at 01:54

answered Feb 19 '17 at 21:46

Stickers

75,527
23
147
186

score 0 · Answer 3 · answered Feb 19 '17 at 21:51

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

Make child div expand to width of overflown content

3 Answers3

Linked