issue with horizontal scrolling div using flexbox - html

Question

I am using flexbox css to make a container with number of divs to scroll horizontally but the problem is when I try to add more divs to the container, it moves to the left side and the divs left to the display are hidden.
I don't understand what's happening
here is the code snippet and codepen
.scroll{
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
justify-content: space-evenly;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.item{
flex: 0 0 auto;
background: #e4e4e4;
width: 150px;
height: 150px;
margin: 10px;
}
<div class="scroll">
<div class="item">
</div>
<div class="item">
</div> <div class="item">
</div> <div class="item">
</div> <div class="item">
</div> <div class="item">
</div>
<div class="item">
</div> <div class="item">
</div>
<div class="item">
</div> <div class="item">
</div>
</div>
Thank you

Answer 1

The main issue here is that for some justify-content values, the overflow distribution will overflow the flex parent at both its left and right edge.
https://www.w3.org/TR/css-align-3/#distribution-values
Therefor a new keyword has been introduced, safe, where one can control how that overflow should behave.
https://www.w3.org/TR/css-align-3/#overflow-values
As this is a quite new addition to the Flexbox model, it won't work cross browsers yet, nor does space-evenly.
When it does (and for browsers that support it), this CSS line will fix the issue
justify-content: space-evenly safe;
A possible workaround, to achieve both evenly spaced items when they won't fill their parent, and only overflow at the right edge when too many, could be to use auto margins.
Stack snippet
.scroll{
display: flex;
/*flex-wrap: nowrap; this is the default, can be removed */
overflow-x: auto;
/*justify-content: space-evenly; removed */
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.item{
flex: 0 0 auto;
background: #e4e4e4;
width: 150px;
height: 75px;
margin: 10px;
}
.item{
margin-left: auto; /* added */
}
.item:last-child{
margin-right: auto; /* added */
}
Too many
<div class="scroll">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<br>Too few
<div class="scroll">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

Answer 2

Remove justify-content: space-evenly; from .scroll.
Demo:
.scroll{
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.item{
flex: 0 0 auto;
background: #e4e4e4;
width: 150px;
height: 150px;
margin: 10px;
}
<div class="scroll">
<div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div><div class="item">
</div>
</div>
This will stop the elements from being out of bounds on both sides.
All div's get displayed in a row this way.

Answer 3

.Wrapper {
display: flex;
flex-direction: row;
overflow-x: auto;
max-width: 100%; //this will solve issue
}
.TagWrapper:{
display: flex;
flex-shrink: 0;
}

Answer 4

You can set the position of the Parent or Container to be Relative and the child inside them to be absolute.
.Parent{
display: flex;
// and use any flexbox property
width: 100%;
height: 100%
position: relative; // important point
overflow: auto;
}
.Child{
position: absolute; // important point
}