html - 当里面有 table 时如何防止 flex 元素溢出其容器

Question

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

将 width: 85vw 左右设置为 #table-container 可以解决问题，但我更愿意使用相对于正确元素的 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

更改不多，在我看来最简单的方法是不使用 flex 作为容器，而是将其更改为 display:grid; 并设置两列，同时设置overflow-x:hidden; 在 body 元素中，因为 table 元素。

这是一个快速演示:

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 相关代码。