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

我在一列（

.col-2

下面链接中的类）中有一个响应表（可滚动表），每当表内容超过父

.col-2

列的宽度时，该表都需要滚动。我知道

表格布局：固定但在这种情况下无法执行，因为我需要调整单元格以适应内容。查看下面的链接时，请缩小视口，以查看表格如何脱离我希望它在
容器中开始滚动的列。滚动内部
容器

.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%;
}



表格溢出-X滚动
第1列ColumnCollu MNC Column
#
名字
姓
用户名
#
描述
说明1
说明2
1.
做记号
奥托
@mdo
1.
这句话从这里开始
这句话从这里开始
这句话从这里开始
2.
雅各布
桑顿
@肥
2.
这句话从这里开始
这句话从这里开始
这句话从这里开始
3.
拉里
鸟
@推特
3.
这句话从这里开始
这句话从这里开始
这句话从这里开始
4.
大卫
布洛克
@塞尔凯
4.
这句话从这里开始
这句话从这里开始
这句话从这里开始

这里是解决问题的代码笔

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

将
最小宽度：0
添加到
.col-2
（）。解释一式两份。
.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
}