Reactstrapの「Tabs」がスマホ時改行してしまう。レスポンシブ対応をしたい...

開発環境悩んでいる点

現在ReactのNext.jsを使用しWebサービスのフロントエンドのコーディングをしております。

その際Reactstrapのコンポーネントを呼び出し各部品に役立ていますが、「Tabs」コンポーネントがレスポンシブ対応しておらずスマホ幅にすると右横から順番に「Tabs」が改行していき非常に見えづらいデザインになってしまいます。(下記PC画面時、スマホ画面時参照)

私の理想としては幅からはみ出す「Tabs」は見えなくし横スクロールできるようにしたんですがCSSの「overflow」を使っても中々思い通りにいきません。

出来ればjQueryとReactの併用は避けたいのですが何か良案等ないかと思いteratailに質問させていただきました。

teratailをご利用しているエンジニアの方は大変お忙しいとは思いますが是非ご教授お願い申し上げます。

PC画面時

スマホ画面時

コード

React.js
1import React, { useState } from 'react';
2import { TabContent, TabPane, Nav, NavItem, NavLink, Row, Col } from 'reactstrap';
3import classnames from 'classnames';
4
5const Example = (props) => {
6  const [activeTab, setActiveTab] = useState('1');
7
8  const toggle = tab => {
9    if(activeTab !== tab) setActiveTab(tab);
10  }
11
12  return (
13    <div>
14      <Nav tabs>
15        <NavItem>
16          <NavLink
17            className={classnames({ active: activeTab === '1' })}
18            onClick={() => { toggle('1'); }}
19          >
20            Tab1
21          </NavLink>
22        </NavItem>
23        <NavItem>
24          <NavLink
25            className={classnames({ active: activeTab === '2' })}
26            onClick={() => { toggle('2'); }}
27          >
28            More Tabs
29          </NavLink>
30        </NavItem>
31      </Nav>
32      <TabContent activeTab={activeTab}>
33        <TabPane tabId="1">
34          <Row>
35            <Col sm="12">
36              <h4>Tab 1 Contents</h4>
37            </Col>
38          </Row>
39        </TabPane>
40        <TabPane tabId="2">
41          <Row>
42            <Col sm="6">
43              <h4>More Tabs Contents</h4>
44            </Col>
45          </Row>
46        </TabPane>
47      </TabContent>
48    </div>
49  );
50}
51
52export default Example;