When tab-item was too much, tab can't scroll

[yeomanyang]

When tab-item was too much, tab can't scroll and the part of the text is blocked.I saw the tab component in vux,find that it user 'display:flex;width:100%' to layout items average.But what I want is that when tab-item was too much, tab can scroll and I can set the min width of item.
Now I can think of is use 'scroller' in tab to implementation this feature.
And I also want your advance.

Version

Android or iOS

For Android issues, please specify the brand, model and browser

Your Codes

<!--put your code here-->
<template>
      <tab-item :selected="tabItem === tab" @click="filterOrder(tab)" v-for='tab in tabs'>{{tab}}  
      </tab-item>
</template>
<script>
export default {
       data() {
            return {
                 tabs:['one','two','three','four','five','six','seven','eight','nine','ten','eleven']
            }
       }
}
</script>
### Expected behavior and actual behavior.

### Steps to reproduce the problem

[airyland]

simple way:

<div style="width: 100%;overflow:scroll;-webkit-overflow-scrolling:touch;">
      <tab style="width:500px;">
        <tab-item :selected="demo1 === '分类1'" @click="demo1 = '分类1'">已发货</tab-item>
        <tab-item :selected="demo1 === '分类2'" @click="demo1 = '分类2'">未发货</tab-item>
        <tab-item :selected="demo1 === '分类3'" @click="demo1 = '分类3'">全部订单</tab-item>
        <tab-item :selected="demo1 === '分类4'" @click="demo1 = '分类4'">全部订单</tab-item>
        <tab-item :selected="demo1 === '分类5'" @click="demo1 = '分类5'">全部订单</tab-item>
      </tab>
    </div>

[cjsvaxlp]

请问下，您这tab默认宽度为100%，如果我两边有返回和退出，地下线和文本就不对齐了，如何处理