Почему прокручиваемая таблица в гибкой сетке выходит за пределы контейнера столбца?

У меня есть адаптивная таблица (прокручиваемая таблица) в столбце (класс .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/coreybruere/pen/aXbzQo