abaracedo abaracedo - 1 year ago 62
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

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

Pen sample


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


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
properties setting them to
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 Source

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?

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download