Table response problems caused by flex - Codes Helper

problem: when doing responsive development, you encounter a flex layout, which is used with table tables. Table uses bootstrap"s responsive table, but it is found that in the flex layout, the width of the table will not change. As shown in the figure

table in flex layout

floattable

table in flex layout the page has a horizontal scroll bar when the page width is not enough, which is obviously not the effect of my response, but I don"t know why

code is as follows:
1, flex layout:

<style>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    table{
        width: 100%;
        max-width: 100%;
        border-spacing: 0;
        border-collapse: collapse;
    }
    th,td{
        padding: 5px;
        border: 1px solid -sharpccc;
        white-space: nowrap;
    }
    .main{
        border: 1px solid -sharpf60;
    }
    .table-responsive{
        overflow-x: auto;
    }
    .clearfix::before,
    .clearfix::after{
        display: table;
        content: " ";
        clear: both;
    }


    .container{
        display: flex;
        max-width: 1200px;
        margin: 20px auto;
    }
    .left-menu{
        flex: 0 0 200px;
        height: 400px;
        border: 1px solid -sharpccc;
    }
    .right-container{
        flex: 1;
        padding-left: 30px;
    }
</style>

<div class="container">
    <div class="left-menu"></div>
    <div class="right-container">
        <div class="main">
            <div class="table-responsive">
                <table>
                    <thead>
                        <tr>
                            <th>1</th>
                            <th>2</th>
                            <th>3</th>
                            <th>4</th>
                            <th>5</th>
                            <th>6</th>
                            <th>7</th>
                            <th>8</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>td1td1</td>
                            <td>td2td2</td>
                            <td>td3td3</td>
                            <td>td4td4</td>
                            <td>td5td5</td>
                            <td>td6td6</td>
                            <td>td7td7</td>
                            <td>td8td8</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

2, float layout

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    table{
        width: 100%;
        max-width: 100%;
        border-spacing: 0;
        border-collapse: collapse;
    }
    th,td{
        padding: 5px;
        border: 1px solid -sharpccc;
        white-space: nowrap;
    }
    .main{
        border: 1px solid -sharpf60;
    }
    .table-responsive{
        overflow-x: auto;
    }
    .clearfix::before,
    .clearfix::after{
        display: table;
        content: " ";
        clear: both;
    }


    .container-float{
        max-width: 1200px;
        margin: 20px 50px;
    }
    .left-menu-float{
        float: left;
        width: 200px;
        height: 400px;
        border: 1px solid -sharpccc;
    }
    .right-container-float{
        padding-left: 230px;
    }    
</style>

<div class="container-float clearfix">
    <div class="left-menu-float"></div>
    <div class="right-container-float">
        <div class="main-float">
            <div class="table-responsive">
                <table>
                    <thead>
                        <tr>
                            <th>1</th>
                            <th>2</th>
                            <th>3</th>
                            <th>4</th>
                            <th>5</th>
                            <th>6</th>
                            <th>7</th>
                            <th>8</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>td1td1</td>
                            <td>td2td2</td>
                            <td>td3td3</td>
                            <td>td4td4</td>
                            <td>td5td5</td>
                            <td>td6td6</td>
                            <td>td7td7</td>
                            <td>td8td8</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>