标签盈余/溢出的CSS解决方案

Question

我的项目的设计团队为选项卡组件解决方案创建了一个模型。在样机中，如果有过多的选项卡-意味着有更多的选项卡超出了可用的水平空间，则所有将被截断的选项卡都将被删除并放置在弹出/下拉菜单中。这是一个示例，其中有6个标签，但是鉴于屏幕大小，最后三个标签将被截断：

以下是一些示例标记：

<div class="tabs-container">    
    <ul>
        <li>
            <button type="button">Tab 1</button>
        </li>
        <li>
            <button type="button">Tab 2</button>
        </li>
        <li>
            <button type="button">Tab 3</button>
        </li>
    </ul>
    <div class="tabs-panel is-active">Tab 1 Content</div>
    <div class="tabs-panel">Tab 2 Content</div>
    <div class="tabs-panel">Tab 3 Content</div>
</div>

我当前正在使用react-tabs库来呈现我的标签，但是上述功能不属于该解决方案。可以使用普通的javascript / jQuery完成此功能，但这是不理想的。

这可以通过HTML / CSS甚至ReactJS来完成吗？