How to prevent a flex item from overflowing its container when there's a table inside

Question

How can I prevent the item on the right side from overflowing its parent (100% of the screen width)? Cell contents must not wrap ( white-space: nowrap cannot be removed).

Setting width: 85vw or so to #table-container will do the trick but I'd prefer to use a 100% width relative to the right item.

 .table td, .table th{ min-width: 7rem; white-space: nowrap; } #container{ display: flex; padding-top: 20vh; } #container .left{ flex: 15% 0 0; padding: 1rem; } #container right{ flex: 0 1 0; } #table-container{ max-height: 400px; overflow: auto; width: 100%; } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div id="container"> <div class="left"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="right"> <div> <ul class="nav nav-tabs"> <li class="nav-item"><a href="javascript:" class="nav-link active">Tab 1</a></li> <li class="nav-item"><a href="javascript:" class="nav-link">Tab 2</a></li> <li class="nav-item"><a href="javascript:" class="nav-link">Tab 3</a></li> <li class="nav-item"><a href="javascript:" class="nav-link">Tab 4</a></li> <li class="nav-item"><a href="javascript:" class="nav-link">Tab 5</a></li> </ul> </div> <div class="tab-content"> <div class="tab-pane active"> <div> <div class="row"> <div class="col-sm-12"> <!-- Map from Google Maps being stretched --> </div> <div class="col-sm-12"> <div id="table-container"> <table class="table"> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> </tr> </thead> <tbody> <tr> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td> <td>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td> <td>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</td> <td>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </div> 

Answer 1

With not many changes, and the easiest way possible in my opinion, is to instead of using flex for container, change it to display:grid; and set two columns, and also, set the overflow-x:hidden; in the body element, because of the table element.

Here is a quick demo:

 body{ overflow-x: hidden; } .table td, .table th{ min-width: 7rem; white-space: nowrap; } #container{ display: grid; grid-template-columns: 15% 85%; padding-top: 20vh; } #table-container{ max-height: 400px; overflow: auto; width: 100%; } 

  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div id="container"> <div class="left"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="right"> <div> <ul class="nav nav-tabs"> <li class="nav-item"><a href="javascript:" class="nav-link active">Tab 1</a></li> <li class="nav-item"><a href="javascript:" class="nav-link">Tab 2</a></li> <li class="nav-item"><a href="javascript:" class="nav-link">Tab 3</a></li> <li class="nav-item"><a href="javascript:" class="nav-link">Tab 4</a></li> <li class="nav-item"><a href="javascript:" class="nav-link">Tab 5</a></li> </ul> </div> <div class="tab-content"> <div class="tab-pane active"> <div> <div class="row"> <div class="col-sm-12"> <!-- Map from Google Maps being stretched --> </div> <div class="col-sm-12"> <div id="table-container"> <table class="table"> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> </tr> </thead> <tbody> <tr> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td> <td>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td> <td>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</td> <td>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </div> 

This way, you also remove some redundant flex related code.