为什么 flex 网格内的可滚动表在列容器之外中断

Question

>我在列（下面链接中的.col-2类）中有一个响应式表（可滚动表），每当表内容超过父.col-2列的宽度时，它都需要可滚动。我知道table-layout: fixed;但在这种情况下无法做到这一点，因为我需要调整单元格以适应内容。查看下面的链接时，请缩小视口，以查看表格如何从我希望它在.scroll-inner容器中开始滚动的列中分离出来。

.table {
    margin-bottom: 0;
    max-width: none;
    width: 100%;
}
.panel {
    padding: 15px;
    display: flex;
}
.col-1 {
    min-width: 200px;
    max-width: 220px;
}
.col-2 {
    width: 100%;
}
.scroll-inner {
    overflow-y: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

<div class="container">
    <h1 class="text-center">Table Overflow-X Scroll</h1>
    <div class="panel panel-default">
        <div class="col-1">Column 1 Column ColumnColu mnColumnC olumn</div>
        <div class="col-2">
            <div class="center-block scroll-inner">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Username</th>
                            <th>#</th>
                            <th>Description</th>
                            <th>Description 1</th>
                            <th>Description 2</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">1</th>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                            <th>1</th>
                            <th>The sentance starts here</th>
                            <th>The sentance starts here</th>
                            <th>The sentance starts here</th>
                        </tr>
                        <tr>
                            <th scope="row">2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                            <th>2</th>
                            <th>The sentance starts here</th>
                            <th>The sentance starts here</th>
                            <th>The sentance starts here</th>
                        </tr>
                        <tr>
                            <th scope="row">3</th>
                            <td>Larry</td>
                            <td>the Bird</td>
                            <td>@twitter</td>
                            <th>3</th>
                            <th>The sentance starts here</th>
                            <th>The sentance starts here</th>
                            <th>The sentance starts here</th>
                        </tr>
                        <tr>
                            <th scope="row">4</th>
                            <td>David</td>
                            <td>Bullock</td>
                            <td>@serkai</td>
                            <th>4</th>
                            <th>The sentance starts here</th>
                            <th>The sentance starts here</th>
                            <th>The sentance starts here</th>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

https://codepen.io/coreybruyere/pen/aXbzQo

Answer 1

这里是针对您的问题的解决方案的代码笔链接

在您的 Codpen 评论中添加了一些小修复，希望这就是您想要的响应式

.table {overflow:hidden // added code}    
.col-2 {
  overflow:hidden // added code
}
.center-block {
   overflow : auto; // added code
 }
.table {
  margin-bottom: 0;
  max-width: none;
  width: 100%;
  min-width:900px; // added code
  overflow:hidden   // added code
}