flex引起的table响应式问题

Question

问题：在做响应式开发时遇到了flex布局，与table表格一起使用的情况，table是采用bootstrap的响应式table，但发现在flex布局中，table的宽度就不会变化。如图：

flex布局中的table

float布局中的table

在flex布局中的table当页面宽度不够时页面有了横向滚动条，这显然不是我响应的效果，但不知道这是为什么

代码如下：
1、flex布局：

<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 #ccc;
        white-space: nowrap;
    }
    .main{
        border: 1px solid #f60;
    }
    .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 #ccc;
    }
    .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>td列1td列1</td>
                            <td>td列2td列2</td>
                            <td>td列3td列3</td>
                            <td>td列4td列4</td>
                            <td>td列5td列5</td>
                            <td>td列6td列6</td>
                            <td>td列7td列7</td>
                            <td>td列8td列8</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

2、float布局

<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 #ccc;
        white-space: nowrap;
    }
    .main{
        border: 1px solid #f60;
    }
    .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 #ccc;
    }
    .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>td列1td列1</td>
                            <td>td列2td列2</td>
                            <td>td列3td列3</td>
                            <td>td列4td列4</td>
                            <td>td列5td列5</td>
                            <td>td列6td列6</td>
                            <td>td列7td列7</td>
                            <td>td列8td列8</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Answer 1

flex不是宽度没有变化,只是里面内容到极限了,它把这个极限宽度当做了min-width,
float相应的处理就是对表格做overflow-x: auto;

给.right-container加overflow-x: auto;就可以了