灵活的孩子高度会在其他孩子被移除时进行调整

Question

我在一个有display : flex和flex-direction : column的父母中有多个孩子。页面上有一个切换控件，它将删除其中一个子控件。

如果要删除任何子代，我希望桌子的高度占据所有剩余空间

<body>
<div class="parent">
  <div class="child">
    Child1
  </div>
  <div class="child">
    Child2
  </div>
  <div class="child">
    Child3
  </div>
  <div class="child">
    <div id="table">
      <div class="tr">
        <div class="td">Row 1, <br />Column 1</div>
        <div class="td">Row 1, Column 2</div>
        <div class="td" style="background:#888888;"></div>
      </div>
      <div class="tr">
        <div class="td">Row 2, <br />Column 1</div>

        <div class="td" style="background:#888888;"></div>
        <div class="td">Row 2, Column 2</div>
      </div>
    </div>
  </div>
</div>

css

   .parent{
    border: black 1px solid;
    height: 260px;
    display:flex;
    flex-direction:column;
  }

  .child{
    padding:5px;
    align

  }
  #table {
      display: table;
      height:160px;

  }
  .tr {
      display: table-row;
      padding: 5px;
  }
  .td {
      display: table-cell;
      padding: 5px;
      width: 150px;
      border: #000000 solid 1px;
      margin: 5px;
  }

CodeSandbox

[当前，如果我们删除Child2，则表格会向上移动，但高度不会调整。表格内容也有滚动。

Answer 1

另一答案

Answer 2

另一答案

Answer 3

另一答案