为什么我的伸缩商品在垂直方向上溢出了其父商品？如何使弹性物品的高度与父代一起缩小和增长？

Question

我正在使用flex: 1来尝试获取Flexbox中的最后一项以填充父项的剩余高度。它可以在所有div上正常工作，直到我们到达table元素为止，一旦它获得了很多内容，它就会大量溢出。如何告诉桌子适合其容器的高度？

.fit-to-screen {

  display: flex;
  flex-direction: column;
  height: calc(100vh - 98px);

  .fit-to-screen-padding {
    padding: 4%;
    height: 100%;
    display: flex;
    flex: 1;
    flex-direction: column;

    .table-container {
      flex: 1;
      height: 100%;

      .table {
        display: flex;
        flex: 1;
        height: 100%;
        flex-direction: column;
        border: 1px solid;
        width: 100%;
        min-width: 445px;
        max-width: 1459px;
    }
  }
}

<div class="fit-to-screen">
  <div class="fit-to-screen-padding">
    <div class="item-1"></div>
    <div class="item-2"></div>
    <div class="table-container">
      <div class="table"></div>
    </div>
  </div>
</div>