为什么 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

这里是您问题解决方案的代码笔LINK

在你的 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
}