Webpage shrinking on Mobile due to Overflow

I have a webpage with an element that is 300vw wide to allow for the below scroll bar functionality with 3 100vw divs that are contained with in it.

-------------- -------------- --------------
| visible    | | invisible  | | invisible  |
|            | |            | |            |
-------------- -------------- --------------

However, when I open the website on mobile the webpage is shrunk so that 300vw is classed as 100% of the device width not 100vw. How can I set 100vw to be 100% of the device width.

I have tried to use different variations of the below meta tag but it doesn't seem to help.

 <meta name="viewport" content="width=device-width"/>