Overflow area of div has no style [duplicate] - html

Question

This question already has answers here:
Make background color extend into overflow area
(4 answers)
Closed 4 years ago.
I'm trying to create a table like structure that is scrollable horizontally. To do that I have a wrapper div that has overflow-x: auto, a div for each row and a div for each cell.
I want to apply a style to the row but the style is only applied to those elements that are visible.
.inner {
flex: 1 0 10em;
height: 2em;
background-color: green;
}
.outer {
border-bottom: 10px solid red;
display: flex;
}
.box {
width: 20em;
overflow-x: scroll;
}
<div class="box">
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
</div>
I want all of the green boxes to have a red bottom border, but the border only appears on those items that are not overflowing. What am I missing?

Answer 1

You may try this instead:
.inner {
flex: 1 0 10em;
width:10em; /*Specify a width */
height: 2em;
background-color: green;
}
.outer {
border-bottom: 10px solid red;
display: inline-flex; /* to take the width of content and not container*/
}
.box {
width: 20em;
overflow-x: scroll;
}
<div class="box">
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
</div>

Answer 2

I dont know exactly what you mean, but I hope this helps:
Since the CSS you use only for the outer,It does just that and put it only for the part that is visible. To achieve bottom red border for all of them, you have to put the border on the inner part.
HTML:
<div class="box">
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
</div>
CSS:
.inner {
flex: 1 0 10em;
height: 2em;
background-color: green;
border-bottom: 10px solid red;
}
.outer {
width: 20em;
display: flex;
}
.box {
width: 20em;
overflow-x: scroll;
}
Hope it helps :)