The Tabs gets hidden or it makes its parent element scroll when the width of Tab exceeds its container width. Shouldn't this be handled using either of two:
Sample
https://codesandbox.io/s/fomantic-tab-issue-v6er3?file=/src/App.js
I tried it by changing the fomantic CSS as
.ui.secondary.pointing.menu{
overflow-x: scroll;
overflow-y: hidden;
&::-webkit-scrollbar {
display: none;
width: 0;
background: transparent;
}
}
But this made the active Tab bottom border gone. Also, the scrollbar not hiding.
I've run into a similar design issue before, I used JS to dynamically create a simple dropdown on the right side. It would be nice if the tab container could detect when it is overflowing and update the dropdown manually though.

https://jsfiddle.net/h61dvjbz/
(I know this isn't directly related to your request, I just thought I'd mention a solution I've used before)
Most helpful comment
I've run into a similar design issue before, I used JS to dynamically create a simple dropdown on the right side. It would be nice if the tab container could detect when it is overflowing and update the dropdown manually though.
https://jsfiddle.net/h61dvjbz/
(I know this isn't directly related to your request, I just thought I'd mention a solution I've used before)