如何在可水平滚动的表格中显示可见的垂直溢出？

<div class="table-container">
  <div class="wrapper">
    <div class="inner-container">
      <table>
        <!-- 表头 -->
        <thead>
          <tr>
            <th>列1</th>
            <th>列2</th>
            <th>列3</th>
            <!-- 其他列 -->
          </tr>
        </thead>
        <!-- 表格内容 -->
        <tbody>
          <tr>
            <td>数据1</td>
            <td>数据2</td>
            <td>数据3</td>
            <!-- 其他数据 -->
          </tr>
          <!-- 其他行 -->
        </tbody>
      </table>
    </div>
  </div>
</div>

.table-container {
  height: 300px;
  width: 100%;
  overflow: auto;
}

.wrapper {
  height: calc(100% - 30px); /* 减去表头的高度 */
  width: calc(100% - 20px); /* 减去垂直滚动条的宽度 */
}

.inner-container {
  height: 100%; /* 表格内容的高度 */
  width: 100%; /* 表格容器的宽度 */
  overflow-y: scroll;
  overflow-x: hidden;
}

table {
  width: calc(100% - 20px); /* 减去垂直滚动条的宽度 */
  border-collapse: collapse;
}

th, td {
  white-space: nowrap;
  /* 其他样式 */
}