JSFiddle - React, Tailwind, and code Playground

by Tristanschaaf

HTML

<header>
  <div class="wrapper">
    <ul class="parent">
      <li class="child">Menu item 1</li>
      <li class="child">Menu item 2</li>
      <li class="child">Menu item 3
        <ul class="sub-parent">
          <li class="sub-child">Sub item 1</li>
          <li class="sub-child">Sub item 2</li>
          <li class="sub-child">Sub item 3</li>
          <li class="sub-child">Sub item 4</li>
          <li class="sub-child">Sub item 5</li>
          <li class="sub-child">Sub item 6</li>
          <li class="sub-child">Sub item 7</li>
          <li class="sub-child">Sub item 8</li>
          <li class="sub-child">Sub item 9</li>
          <li class="sub-child">Sub item 10</li>
          <li class="sub-child">Sub item 12</li>
          <li class="sub-child">Sub item 13</li>
          <li class="sub-child">Sub item 14</li>
          <li class="sub-child">Sub item 15</li>
          <li class="sub-child">Sub item 16</li>
          <li class="sub-child">Sub item 17</li>
          <li class="sub-child">Sub item 18</li>
          <li class="sub-child">Sub item 19</li>
        </ul>

      </li>
      <li class="child">Menu item 4</li>
      <li class="child">Menu item 5</li>
      <li class="child">Menu item 6</li>
    </ul>
  </div>
</header>
<div class="content">
Sub-items should wrap till end of viewport
</div>

SCSS

header{
 position: fixed;
 top: 0;

}

.wrapper{
  background: #8AB9B5;

}

.parent{
  display: flex;
  background: #C8C2AE;
  list-style: none;
  width: 100vw;
}

.child{
  margin: 0.5em;
}

.sub-parent{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-height: 80vh;
  background: #D0CDD7;
  position: absolute;
  margin: 0;
  list-style: none;
  padding: 0;
  writing-mode: vertical-lr;
}

.sub-child{
  background: #ACB0BD;
  display: block;
  margin: 0.5em;
  writing-mode: horizontal-tb;
}

.content{
  margin-top:100px;
}