overflow-x children element width

Question

I have a div with overflow-x auto. This div has children which are wider than the parent div, causing a scroll.

The inner children are given a border and background color which I would like to stretch across the entire width of them - including the scrolled overflow. The actual content of the inner children is dynamic - so I can't give them a set width.

.outer {
  border: 1px solid black;
  width: 100px;
  overflow-x: auto;
  white-space: nowrap;
}

.inner {
  border-bottom: 1px solid blue;
  background-color: red;
}

<div class="outer">
  <div class="inner">This is is row number 1</div>
  <div class="inner">This is is row number 2</div>
  <div class="inner">This is is row number 3</div>
</div>

The problem is that it doesn't - as can be seen in this fiddle, the background and border only stretch to the defined width of the parent.

How can I make the width of the children stretch to the entire scrolled area?

Answer 1

The <div> element is a block element and its width will be 100% of its parent. Making it an inline element will force the width of the div to stretch with its text content, but sadly it will need extra markup to make it break into rows (<br/> tags).

The way I manage to do it for your case is by making the inner container display: table; that way the element will behave as table and it'll stretch its width to match its inner text.

.outer {
  border: 1px solid black;
  width: 100px;
  overflow-x: auto;
  white-space: nowrap;
}

.inner {
  display: table;
  border-bottom: 1px solid blue;
  background-color: red;
}

Here's a demo: jsFiddle