html - 垂直对齐可滚动的旋转文本

Question

我正在尝试获取垂直导航列表，该列表旋转 90 度后可垂直滚动(相对于视口(viewport))。这个想法是，菜单项可以动态添加，一旦添加，一旦使用了整个视口(viewport)高度，就应该可以垂直滚动。

当前的解决方案几乎可以工作，它使列表水平扩展，如果您有一个固定宽度的窄导航栏，这不是理想的选择。

这是来自 previous question 的代码示例来自 2 年前的插图。

JSBIN

html, body {
  min-height:100%;
  max-height:100%;
  height:100%;
  font-family:Oswald, sans-serif, Arial;
  font-size:14px;
  background:#fff
}
a {
  text-decoration:none
}
li {
  list-style:none
}
ul {    
  margin:0
}
.main-nav {
  width:100vh;    
  height:45px;
  position:fixed;
  background:#4c4c4c;
  -webkit-transform-origin: left top;
  -webkit-transform:rotate(-90deg) translateX(-100%);
}
ul.nav {    
  margin:0 auto;
  height:100%;        
}

ul.nav li {    
  margin-right:20px;
  float:right;
  height:100%;
  line-height:45px;
}
ul.nav li a {           
  color:#fff;    
}

<div class="main-nav">
  <ul class="nav">
    <li><a href="#">HOME</a></li>
    <li><a href="#">METHODOLGY</a></li>
    <li><a href="#">PORTFOLIO</a></li>
    <li><a href="#">SERVICES</a></li>
    <li><a href="#">TEAM</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</div>

Answer 1

只需在 ul.nav 选择器中添加 display:flex 并设置 overflow-y:hidden 和 overflow-x:auto 在 .main-nav

这是 JSBIN:http://jsbin.com/qixapariku/1/edit?html,css,output