html中自动分配界面

<div id="appContainer">
    <div id="viewDiv"></div>
    <div class="container" id="container">
      <div id="tableDiv"></div>
    </div>
  </div>

 #appContainer {
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 100%;
    }

    #viewDiv {
      /* height: 50%; */
      flex: 1;
      width: 100%;
    }

    .container {
      display: flex;
      flex: 1;
      /* height: 50%; */
      width: 100%;
    }