Why is scrollable table within flex grid breaking outside of column container?

Question

I have a responsive table (scrollable table) within a column (.col-2 class in link below) that needs to be scrollable whenever the table content exceeds the width of the parent .col-2 column. I'm aware of table-layout: fixed; but can't do it in this case since I need the cells to be adjusted to fit the content. Make your viewport smaller when viewing the link below to see how the table breaks out of the column where I'd like it to start scrolling within the .scroll-inner container.

.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

Add `min-width: 0` to `.col-2` ([revised codepen demo](https://codepen.io/anon/pen/rPVpLz)). Explanation in the duplicate. — Michael Benjamin, Jan 24 '19 at 02:00

score -1 · Answer 1 · answered Jan 22 '19 at 18:40

here the codepen LINK of the solution for your problem

added some minor fixed to your codpen review that and hopefully that's what you want for responsive

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

Why is scrollable table within flex grid breaking outside of column container?

1 Answers1