iPhoneでナビゲーションの横スクロールを実現したい


cssでナビゲーションの横スクロールを実装しようとしているんですが、うまくいきません。  
環境はiPhone5c、iOS 10.3.3、Safari 602.1です。  
下記のようにコードを書いているんですが、iPhoneでは全くスクロールできません。  
PCやXperiaでは問題なくスクロールできています。  
ご教授よろしくお願い致します。

[code]

    <div class="navigation">
      <ul>
        <li>nav1</li>
        <li>nav2</li>
        <li>nav3</li>
        <li>nav4</li>
      </ul>
    </div>
    
    .navigation {
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      width: 100vw;
    }
    
[/code]




100vwという指定のため横スクロールしていないと思います。  
vwという単位は、ビューポートの幅に対する割合のため100vwは、横幅ピッタリ１００％ということになります。  
その為、少なくともiOSでは横スクロールは発生しません。（iOS11のSafariで確認）  
vwを1000とかの値にすると、画面サイズよりもコンテンツサイズが大きくなるためiOSでも横スクロールが発生します。

