html - 为什么我的弹性项目垂直溢出其父项？我怎样才能让弹性项目高度随父项缩小和增长？

Question

我flex: 1用来尝试获取我的弹性框中的最后一项来填充父项的剩余高度。它适用于所有 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>

标签： htmlcssflexbox