html 简单的网页横向滚动

html内容

<div style="position: absolute;" class="wai" id="app-7">
			<div class="li">
				<div class="mian"><span v-for="item in groceryList" :key="item.id">{{item.text}}</span></div>
			</div>
		</div>

script部分

var App = new Vue({
			el: "#app-7",
			data: {
				groceryList: [{
						id: 0,
						text: '蔬菜'
					},
					{
						id: 1,
						text: '奶酪'
					},
					{
						id: 2,
						text: '随便其他什么人吃的东西'
					}
				]
			}
		})

在style中

<style>
			* {
				margin: 0px;
				height: 0px;
			}
			.wai {
				//内容在网页中心出现
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;

				width: 100px;
				height: 100px;
				background-color: red;
				transform: rotate(-90deg);
			}
			.li {
				width: 100px;
				height: 200px;
				
				background-color: blue;
				overflow-y: scroll;
				overflow-x: hidden;
				
   				//滚动条隐藏
				-ms-overflow-style: none;
				/* Internet Explorer 10+ */
				scrollbar-width: none;
				/* Firefox */
				&::-webkit-scrollbar {
					/* Webkit浏览器 */
					display: none;
					/* 隐藏滚动条 */
				}
			}
			.mian {
				width: 100px;
				height: 100px;
				background-color: green;
				line-height: 100px;
				white-space: nowrap;
				transform: rotate(90deg);
			}
			span {
				margin-left: 20px;
				display: inline-block;
				background-color: aqua;
				height: 30px;
				width: 30px;
				color: white;
			}
			-webkit-scrollbar {
				// display: none;
			}
		</style>

最终效果

个人能力：
正方形来控制旋转的角度和位置是最方便的。
如果要长方形的我会直接在最外面包一个div，
然后用overflow 的hidden 来隐藏多余的部分，来实现效果。
如果有更简单的请大佬教导，让我学习学习。