Element is not 100% width in div - html

Question

I have a div with some elements. I want these elements to be 100% width of the container div.
.container {
height: 100px;
width: 100px;
display: flex;
flex-direction: column;
overflow: scroll;
border: 1px solid black;
}
.inner {
width: 100%;
background-color: gray;
white-space: nowrap;
}
<div class="container">
<span class="inner">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</span>
<span class="inner">XXX</span>
<span class="inner">XXX</span>
</div>
As you can see if you horizontally scroll, the background is not 100% complete.

Answer 1

update your code like below:
.container {
height: 100px;
width: 100px;
display: flex;
flex-direction: column;
overflow: scroll;
border: 1px solid black;
align-items:flex-start; /* disable the stretch alignment*/
}
.inner {
min-width: 100%; /* min-width instead of width*/
background-color: gray;
white-space: nowrap;
}
<div class="container">
<span class="inner">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</span>
<span class="inner">XXX</span>
<span class="inner">XXX</span>
</div>
Or like below if you want all elements to get full coloration
.container {
height: 100px;
width: 100px;
overflow: scroll;
border: 1px solid black;
}
.container>div {
min-width: 100%;
display: inline-block;
}
.inner {
display:block;
background-color: gray;
white-space: nowrap;
}
<div class="container">
<div>
<span class="inner">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</span>
<span class="inner">XXX</span>
<span class="inner">XXX</span>
</div>
</div>

Answer 2

Here's the flex solution.
Replace flex-direction: column with flex-flow: column wrap in .container. And remove width: 100% from .inner.
And you get the desired result.
.container {
height: 100px;
width: 100px;
display: flex;
/*flex-direction: column;*/
flex-flow: column wrap;
overflow: scroll;
border: 1px solid black;
}
.inner {
/*width: 100%;*/
background-color: gray;
white-space: nowrap;
}
<div class="container">
<span class="inner">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</span>
<span class="inner">XXX</span>
<span class="inner">XXX</span>
</div>

Answer 3

UPDATE: I have came up with this non-flexbox solution (A curiosity driven actioin) Initially I misunderstood the question.
SOLUTION 1: Adding a wrapper div around your spans.
.container {
height: 100px;
width: 100px;
border: 1px solid black;
overflow-x:scroll;
}
.wrapper{
background:orange;
height:auto;
width:max-content;
}
.inner{
display:block;
min-width:100px;
}
<div class="container">
<div class="wrapper">
<span class="inner">LONG TEXT LONG TEXT LONG TEXT LONG TEXT LONG TEXT</span>
<span class="inner">XXX</span>
<span class="inner">XXX</span>
</div>
</div>

Answer 4

Just put a display: block in the span elements because their default display is inline, and that's why they behave the way they are behaving,