Shopify自定义Tabs组件Flexbox水平单行排列问题求助

我们使用Shopify平台，此前有一位开发者为我们创建了自定义tabs类。遗憾的是该开发者已离职，我尝试自行修改该组件却未能成功——我是Flexbox和SCSS完全新手。

当前SCSS代码 #

ul.tabbies {
  @extend %block;
  @include overflow-touch;
  @extend %unselectable;
  @include flexbox();
  @include flex-grow(1);
  @include flex-shrink(0);
  @include justify-content(flex-start);
  @include align-items(stretch);

  border-bottom-color: $tabs-border-bottom-color;
  border-bottom-style: $tabs-border-bottom-style;
  border-bottom-width: $tabs-border-bottom-width;

  padding-left: 0;
  margin-left: 0;
  
  flex-direction: row;
  flex-wrap: wrap;

  a {
    height: calc(100% + 1px);
    align-items: flex-start;
  }
  
  
  a {
    @include align-items(center);
    border-bottom-color: $tabs-border-bottom-color;
    border-bottom-style: $tabs-border-bottom-style;
    border-bottom-width: $tabs-border-bottom-width;
    color: $tabs-link-color;
    @include flexbox();
    @include justify-content(center);
    margin-bottom: -#{$tabs-border-bottom-width};
    padding: $tabs-link-padding;
    padding-left: 0;
    vertical-align: top;

    &:hover {
      border-bottom-color: $tabs-link-hover-border-bottom-color;
      color: $tabs-link-hover-color;
    }
  }

  li {
    display: block;
    margin-top: 0.25em;
    width: min-intrinsic;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    display: table-caption;
    display: -ms-grid;
    -ms-grid-columns: min-content;

    &.active,
    &.is-active {
      a {
        border-bottom-color: $tabs-link-active-border-bottom-color;
        color: $tabs-link-active-color;
      }
    }

    a.active,
    a.is-active {
      border-bottom-color: $tabs-link-active-border-bottom-color;
      color: $tabs-link-active-color;

      * {
        color: $tabs-link-active-color;// Used to ensure headings get proper color set
      }
    }
  }
}

页面硬编码的Tab结构 #

<!--Start tab labels-->
<ul class="tabbies">
<li><a class="active" href="https://balletassociation.myshopify.com/pages/reports-2001-alina-cojocaru">2001</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2002-deborah-bull">2002</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2003-gemma-bond">2003</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2004-caroline-duprot">2004</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2005-roberto-bolle">2005</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2006-zoe-anderson">2006</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2007-johanna-adams">2007</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2008-deborah-bull">2008</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2009-federico-bonelli">2009</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2010-vanessa-fenton">2010</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2011-camille-bracher">2011-2020</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2020-jessica-clarke">2020-2030</a></li>
</ul>
<ul class="tabbies">
<li><a class="active" href="https://balletassociation.myshopify.com/pages/reports-2001-alina-cojocaru">Alina Cojocaru</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2001-gailene-stock">Gailene Stock</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2001-hubert-essakow">Hubert Essakow</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2001-jenny-tattersall">Jenny Tattersall</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2001-jenny-tattersall">Tom Sapsford</a></li>
</ul>
<!--End tab labels-->

需求说明 #

希望实现的效果是：

• 顶部年份tabs全部显示在单行（即2011-2020、2020-2030不换行堆叠）
• 底部舞者名称tabs保持当前两行显示的状态

请问是否可以实现？如果可以，能否指点解决方向？此前我尝试的所有方法均未成功，在此提前感谢您的帮助。

内容的提问来源于stack exchange，提问作者mark clarke