Tab system in jquery

Question

I’m putting together a flap system, it’s working perfectly, but when I open it on a cell phone it gets all messed up. I wanted to leave it the same as the Android, when you have many tabs it creates a scroll bar.

Can someone help me with that?

$(document).ready(function () {
    $('.tab-content').each(function (i) {
        var tabTitle = $(this).data('tab-title');
        var current = $(this).hasClass('current') ? "current" : "";
        var newTab = $('<li class="tab-link"></li>');
        newTab.html(tabTitle)
                .addClass(current)
                .attr('data-tab', $(this).attr('id'));
        $('ul.tabs').append(newTab);
    });

    $(document).on('click', '.tabs li', function () {
        var tab_id = $(this).attr('data-tab');

        // Verifica se a aba atualiza a página
        if (tab_id === "tab-0") {
            location.reload();
        }

        $('.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    });
});

.tabs-container {
    margin: 0 auto;
}
ul.tabs {
    margin: 0px;
    padding: 0px;
    list-style: none;
    border-bottom: 1px solid #d7d7d7;
}
ul.tabs li {
    background: none;
    color: #616161;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
}
ul.tabs li.current {
    color: #484848;
    border-bottom: 2px solid #F65314;
}
.tab-content {
    display: none;
    padding: 15px;
}
.tab-content.current {
    display: block;
}
.tab-link:hover {
    color: #FBBC05;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="tabs-container w30">
                <ul class="tabs"></ul>

                <!-- Abas 1 -->
                <div id="tab-1" data-tab-title="ABA 1" class="tab-content current">
                    Texto 1
                </div>

                <!-- Abas 2 -->
                <div id="tab-2" data-tab-title="ABA 2" class="tab-content">
                    Texto 2
                </div>

                <!-- Abas 3 -->
                <div id="tab-3" data-tab-title="ABA 3" class="tab-content">
                    Texto 3
                </div>
  
  <!-- Abas 4 -->
                <div id="tab-4" data-tab-title="ABA 4" class="tab-content">
                    Texto 4
                </div>
  
  <!-- Abas 5 -->
                <div id="tab-5" data-tab-title="ABA 5" class="tab-content">
                    Texto 5
                </div>
            </div>