html中自动分配界面

在项目中需要用到一个自动分配内容的功能，即设置两个并列的div如果下方的div关闭，上方的div占满整个屏幕，当下方div出现时，两个div各占界面的50%

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

css设置

 #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%;
    }