abaracedo abaracedo - 22 days ago 6
CSS Question

CSS flexbox reduces width of child element when view is change to mobile

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

flexbox
but when I set the mobile view the width of the navigation items is reduced.

Pen sample

html

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>


less

ul {
display: flex;
margin: 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
overflow-y: hidden;
overflow-x: auto;
li {
flex-grow: 1;
flex-basis: 0;
margin-left: 10px;
}
}


I tried using the
flex-grow
and
flex-basis
properties setting them to
1
and
0
respectively but it didn't work.

In this case I'm using dummy names for the navigation sections, but they can be of different length.

Answer

Keep in mind that an initial setting of a flex container is flex-shrink: 1.

This means that, by default, flex items are allowed to shrink and cannot overflow the container.

To disable this feature use flex-shrink: 0.

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.

With 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?