Table is not getting horizontal scrooll

Question

so guys, I have a page pulling data from the database to the table, but the table doesn’t get the vertical scrooll when it gets bigger than the element... according to bootstrap 4.0 documentation should use like this in the code below, but it doesn’t work in any way...

this is the part of the page, which has a menu on the left....

<div id="right-panel" class="right-panel">

    <!-- Header-->
    <header id="header" class="header">

        <div class="header-menu">

            <div class="col-sm-7">
                <a id="menuToggle" class="menutoggle pull-left"><i class="fa fa fa-tasks"></i></a> 
            </div>

            <div class="col-sm-5">
                <div class="user-area dropdown float-right">
                    <a class="nav-link" href="sair.php"><i class="fa fa-power-off"></i> Sair</a>  
                </div>
            </div>
        </div>

    </header><!-- /header -->
    <!-- Header-->

    <div class="breadcrumbs">
        <div class="col-sm-4">
            <div class="page-header float-left">
                <div class="page-title">
                    <h1>Consulta de Clientes</h1>
                </div>
            </div>
        </div>
                </div>

               <!-- TABELA-->

            <div class="content mt-3">

            <div style="overflow-y: auto; max-height:600px;">
            <div class="form-group input-group">
           <input class="form-control" id="myInput" name="myInput" type="text" placeholder="Search..">
        </div>
        <div class="table-responsive">
               <table class="table table-sm table-striped table-bordered">
         <thead class="thead-dark">
            <tr> 
            <th scope="col">Código</th>
                <th scope="col">Nome</th>
                <th scope="col">Cpf</th>
            <th scope="col">Endereço</th>
            <th scope="col">Número</th>
                <th scope="col">Cidade</th>
                <th scope="col">UF</th>
            <th scope="col">E-mail</th>
            <th scope="col">Telefone</th>
            <th scope="col">Telefone 2</th>
        </tr>
         </thead>
                    <?php 
                while($dados = mysqli_fetch_array($resultado)){
                    $codigo = $dados['cod'];
                $nome = $dados['nome'];
                $cpf = $dados['cpf'];
                $endereco = $dados['endereco'];
                $numero = $dados['numero'];
                $cidade = $dados['cidade'];
                $uf = $dados['uf'];
                $email = $dados['email'];
                $telefone = $dados['telefone'];
                $telefone2 = $dados['telefone2'];
                ?>
     <tbody id="myTable" name="myTable">
        <tr>
        <th scope="row"><?php echo $codigo ?></th>
         <td style= "white-space: nowrap;"><?php echo $nome ?></td>
         <td style= "white-space: nowrap;"><?php echo $cpf ?></td>
         <td style= "white-space: nowrap;"><?php echo $endereco ?></td>
         <td style= "white-space: nowrap;"><?php echo $numero ?></td>
         <td style= "white-space: nowrap;"><?php echo $cidade ?></td>
         <td style= "white-space: nowrap;"><?php echo $uf ?></td>
         <td style= "white-space: nowrap;"><?php echo $email ?></td>
         <td style= "white-space: nowrap;"><?php echo $telefone ?></td>
         <td style= "white-space: nowrap;"><?php echo $telefone2 ?></td>
        </tr>
        <?php } ?>
        </tbody>
    </table>
    </div>
    </div>
        </div>
        </div>

the problem is that div with table-Responsive class before table does not work, not even putting div with

style="overflow-x:auto;"

works only if I put it like this:

style="overflow-x: auto; max-width:1020px;"

but if the monitor is larger it will not enlarge its size