隐藏在垂直溢出下的水平滚动条

Question

我的目标是创建一个具有特定条件的表：

1. 如果显示宽度太小，无法容纳内容，请添加水平滚动条，并且不要收缩单元格。
2. 如果显示高度太小，无法容纳内容，请添加垂直滚动条，并且不要收缩单元格。

我设法实现了这一点，但我有一个问题，如果显示宽度和高度都太小，不能适合内容，垂直滚动条是完美的，但水平滚动条隐藏在垂直溢出下。因此，如果用户希望看到整个第一行，他/她需要垂直滚动到末尾，然后水平滚动到末尾，最后垂直往回滚动看到第一行。
下面是一个JSFiddle示例:https://JSFiddle.net/totsik/fr24ldyb/7/
CSS和HTML:

null

.main-container {
   background-color: #222C2A;
   color: #F3EED9;
   margin: 3rem 5%;
}

.container {
   overflow-y: auto;
   padding: 2rem;
   min-height: 50vh;
   max-height: 70vh;
   border: 2px solid #222C2A;
}

table {
   overflow-x: auto;
   display: block;
   border-collapse: collapse;
   width: 100%;
}

tr.table-head-row th {
   border-style: solid;
   border-width: 2px 0;
   border-color: #F3EED9;
}

tr td {
   text-align: center;
}

tr td:first-child {
   text-align: left;
}

th {
   width: 100%;
   background: #222C2A;
   text-align: left;
   padding: 1rem 2rem;
}

td {
   font-size: 1rem;
   padding: 0.75rem 1.5rem;
   background-color: #F3EED9;
   color: #222C2A;
}

<div class="main-container">
   <div class="container">
      <table>
         <thead>
            <tr class="table-head-row">
               <th class="">header 1</th>
               <th class="">header 2</th>
               <th class="">header 3</th>
               <th class="">header 4</th>
               <th></th>
            </tr>
         </thead>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
      </table>
   </div>
</div>

null

我希望发生的是，如果高度和宽度都太小，滚动条将同时可见。我应该如何更改我的代码来完成这一点？

更新：更新了jsfiddle。还忘了提到，我希望在容器div上的滚动条是垂直的，而不是表本身。

Answer 1

fiddle示例在表中有一个max-height,而上面的文本没有。更改表格中的最大高度

table {
   overflow-x: auto;
   display: block;
   border-collapse: collapse;
   width: 100%;
   max-height: 50vh;
}

并且两条都显示