I'm trying to make a navigation menu which it will be scrollable horizontally in mobile. To do that I want to do it using
Keep in mind that an initial setting of a flex container is
This means that, by default, flex items are allowed to shrink and cannot overflow the container.
To disable this feature use
So, for your
li, you can try this (shorthand version):
flex: 1 0 100px (can grow, can't shrink, initial main size 100px)
Note: You will need to set a minimum width for each flex item, so that
flex-shrink knows the floor.
flex-basis: 0, the minimum width is 0, which means
flex-shrink won't shrink below that, which is pointless.
More details here: What are the differences between flex-basis and width?