overflow-x children element width - css

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

Answer 2

If you give width bigger than the outer to the inner, you'll have the result.
Try to give width: 200px; or 150%; and let me know...
.outer {
border: 1px solid black;
width: 100px;
overflow-x: auto;
white-space: nowrap;
display:flex;
flex-wrap:wrap;
justify-content:strech;
}
.inner {
border-bottom: 1px solid blue;
background-color: blue;
}
<div class="outer">
<div class="container-inner">
<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 rowfddfssdfdfs number 3</div>
</div>
</div>
This is ok ?

Answer 3

It is easy with jquery. Using jquery scrollWidth you will the scroll width you can simply set that as width to inner div. So this will give you scroll width $('.outer')[0].scrollWidth) simply set this as width of inner div.
$(".inner").css('width', $('.outer')[0].scrollWidth);
.outer {
border: 1px solid black;
width: 100px;
overflow-x: auto;
white-space: nowrap;
}
.inner {
border-bottom: 1px solid blue;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">This is is row number 1</div>
<div class="inner">This is is row number 2This is is row number 3 </div>
<div class="inner">This is is row number 3 This is is row number 3 This is is row number 3 </div>
</div>

Answer 4

html: introducing an inner wrapper div
<div class="outer">
<div class="innerwrapper">
<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 This is is row number 3 This is is row number 3</div>
</div>
</div>
css:
.outer {
border: 1px solid black;
width: 100px;
overflow-x: auto;
white-space: nowrap;
display:flex;
flex-wrap:wrap;
justify-content:stretch;
}
.innerwrapper {
/* silence is golden */
}
.inner {
border-bottom: 1px solid blue;
background-color: red;
}
linky: https://jsfiddle.net/sL0rkjgm/29/