onsen-tabbar が多数あると重なってしまう

Question

monaca
###前提・実現したいこと
monacaでアプリを作成しています。
ons-tabbar でtabを複数個作成したところ、
1つの画面に収まるように重なってしまいます。

###発生している問題・エラーメッセージ

onsen-ui tab のタブが重なってしまう

###該当のソースコード

  <ons-page>
    <ons-toolbar>
      <div class="center" id="toolbar-title"></div>
    </ons-toolbar>
    <ons-tabbar position="auto">
      <ons-tab label="Tab 112" page="tab1.html" active>
      </ons-tab>
      <ons-tab label="Tab 2222" page="tab2.html">
      </ons-tab>
        <ons-tab label="Tab 332" page="tab1.html" active>
      </ons-tab>
      <ons-tab label="Tab 244" page="tab2.html">
      </ons-tab>
        <ons-tab label="Tab 112" page="tab1.html" active>
      </ons-tab>
      <ons-tab label="Tab 2222" page="tab2.html">
      </ons-tab>
    </ons-tabbar>
  </ons-page>

###実現したいこと
smartnewsのような感じに、表示できないものは画面外に表示するようにして、タブが重ならないようにしたいのですが、どのようにすればよいのでしょうか。

Answer 1

考えたことがないですが、確かにできるといいですね！
こんな感じでできませんでしょうか？

www/css/style.css

.tab-bar {
    overflow-x: scroll;
    display: block;
}