Horizontal tab bar responsive bootstrap / blazor

I'm creating a tab control in blazor and I want my horizontal tab bar to be responsive when there will be a lot of tabs. Here is what I have for now without the razor code:

<ul class="nav nav-tabs tb-tabs">
    <li class="tb-tab">
        <span class="nav-link">
            Long Name Example 1
            <button style="margin-left:10px;" type="button" class="close" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </span>
    </li>
    <li class="tb-tab">
        <span class="nav-link">
            Small
            <button style="margin-left:10px;" type="button" class="close" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </span>
    </li>
    <li class="tb-tab">
        <span class="nav-link">
            Long Name Example 2
            <button style="margin-left:10px;" type="button" class="close" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </span>
    </li>
    etc ...
</ul>

css:

.tb-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    display: -webkit-box;
    display: -moz-box;
}

.tb-tab {
    background-color: darkgrey;
    float: none;
    width: 150px;
}

.tb-tab:hover {
    color: white;
    border: hidden;
}

    .tb-tab > span {
        padding-left: 5px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

.tb-active {
    background-color: grey;
}

I tried to handle it with my tb-tabs but the scrollbar is not displayed and it display the display others tab on a new line.

I'm looking for 2 different solution: -One where the overflow is handled with a scrollbar -An other one where the overflow is handled with 2 arrows at each side of the tab bar (that I can try to manage using razor fonctionalities)

And also, i'm trying to fix the close button on the top right corner of each tab, especially when the tab name is too long.