.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>