I want to scroll horizontally on my iPhone.

I don't think I'm scrolling horizontally because it's 100vw.
The unit vw is a percentage of the width of the viewport, so 100vw is 100% width.
Therefore, at least there is no horizontal scrolling on iOS (checked by Safari on iOS 11).
If you set vw to 1000 or something, the content size will be larger than the screen size, so iOS will also scroll horizontally.

It is processed so that it can be easily displayed with a snippet.
1. Set the width of .navigation to 200px.
2. li is probably horizontal, so I arranged it in flexbox.
3. The initial value of flex-wrap is nowrap, so li does not return.
4.a is also white-space:nowrap without a new line.
5. I explicitly set the width of ul to 300px, which is larger than .navigation.

.navigation{
  overflow-x —auto;
  overflow-y — hidden;
  - webkit-overflow-scrolling:touch;
  width —200px;
  border —2px solid red;
  margin:0;
  padding:0;
}
.navigationul{
 display:flex;
 verify-content:flex-start;
 width —300px;
 list-style: none;
 margin:0;
 padding:0;
}
.navigation li{
 flex-grow:1;
 background-image: linear-gradient (30 deg, #999, #e99);
}
.navigation a{
 white-space:nowrap;
}

<div class="navigation">
  <ul>
    <li>nav1</li>
    <li>nav2</li>
    <li>nav3</li>
    <li>nav4</li>
  </ul>
</div>

Is ul wider than .navigation?I think it's the point of whether scrolls or not.
You don't have enough li?