Flex & space-around are intersecting the content - css

Question

I have a container that's scrolling horizionally with checkboxes in it. When a box is checked, a text apears. I want to keep the functionality of the items growing from both sides. The thing is that when some checkboxes are checked, the first one is hidden and you cannot scroll to it:
.container {
white-space: nowrap;
text-align: center;
display: flex;
overflow-x: scroll;
justify-content: space-around;
align-items: stretch;
}
.item {
transition: 0.5s ease;
height: 40px;
justify-content: center;
text-align: center;
}
label {
font-size: 0;
transition: 0.5s ease;
}
input:checked~label {
font-size: 20px;
}
<div class="container">
<div class="item">
<input type="checkbox" id="1"></input>
<label for="1">1111111111111111111111111</label>
</div>
<div class="item">
<input type="checkbox" id="1"></input>
<label for="2">22222222222222222222222222222222222</label>
</div>
<div class="item">
<input type="checkbox" id="1"></input>
<label for="3">333333333333333333333333333333</label>
</div>
</div>
Is there a way to keep the transition coming from the center, but still let the user scrolling all the way to the start and the end?
Thanks!

Answer 1

Just done by 2 actions:
Remove the justify-content: space-around; from your .container
Add margin:auto; to your .item.
(Pay attention, className got replaced by class, as the CSS does not recognize the className)
DEMO
.container {
white-space: nowrap;
text-align: center;
display: flex;
overflow-x: scroll;
/*justify-content: space-around;*/
align-items: stretch;
}
.item {
transition: 0.5s ease;
height: 40px;
justify-content: center;
text-align: center;
margin:auto;
}
label {
font-size: 0;
transition: 0.5s ease;
}
input:checked~label {
font-size: 20px;
}
<div class="container">
<div class="item">
<input type="checkbox" id="1" />
<label for="1">1111111111111111111111111</label>
</div>
<div class="item">
<input type="checkbox" id="1" />
<label for="2">22222222222222222222222222222222222</label>
</div>
<div class="item">
<input type="checkbox" id="1" />
<label for="3">333333333333333333333333333333</label>
</div>
</div>

Answer 2

Ooh!!
That's a good one..
It took months from me to solve before.
It's very easy and tricky bro.
Just make your justify-content: flex-start; and then add this flex-grow: 1; for your children which are .item which will seams like a space-around effect.
That's the code:
.container {
white-space: nowrap;
text-align: center;
overflow-x: scroll;
display: flex; align-items: stretch;
justify-content: flex-start; /* ••• this one ••• */
}
.item {
transition: 0.5s ease;
height: 40px; text-align: center;
display: flex; justify-content: center;
flex-grow: 1; /* ••• and this one ••• */
}
label { font-size: 0; transition: 0.5s ease; }
input:checked~label { font-size: 20px; }
<div class="container">
<div class="item">
<input type="checkbox" id="1"></input>
<label for="1">1111111111111111111111111</label>
</div>
<div class="item">
<input type="checkbox" id="2"></input>
<label for="2">22222222222222222222222222222222222</label>
</div>
<div class="item">
<input type="checkbox" id="3"></input>
<label for="3">333333333333333333333333333333</label>
</div>
</div>

Answer 3

justify-content: space-around; from the container and use justify-content: space-between; instead.