里面有桌子时如何防止弹性物品溢出其容器

Question

如何防止右侧的项溢出其父项（屏幕宽度的100％）？ 单元格内容不能换行（ white-space: nowrap无法删除white-space: nowrap ）。

在#table-container设置width: 85vw左右可以解决问题，但相对于正确的项目，我更愿意使用100％的宽度。

 .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

更改不多，在我看来，最简单的方法是将容器更改为display:grid;而不是对容器使用flex display:grid; 并设置两列，还设置了overflow-x:hidden; 在主体元素中，因为表格元素。

这是一个快速演示：

 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> 

这样，您还可以删除一些与flex相关的冗余代码。