flex弹性布局，子div换行显示

问题：今天遇到一个css样式问题，我父div用了 display: flex; 然后有两个子div 第一个子div我设置了100%的宽度，第二个子div也设置了100%的宽度 ，但是两个子div还是同行显示 ，不对我现在想让第一个子div已经占满了第一行，第二个子div就换行显示（也要完整展示）

具体代码展示

<!--    展示聊天界面-->
    <div class="a_single_examinee_chat">
      <!-- 聊天内容区域 -->
      <div class="chat-window">

      </div>

      <!--      输入框-->
      <div class="input-box">

        <!--        <input type="text" @keyup.enter="sendMessage">-->

      </div>
    </div>

css样式如下

.a_single_examinee_chat {
  display: flex;
  flex-wrap: wrap; /* 设置 flex 容器换行显示 */
  background-color: rgba(255, 255, 255, 1);
  width: 40%;
  height: 682px;
}

.chat-window {
  width: 100%;
  border-top: 7px solid rgba(196, 229, 255, 1);
  height: 510px;
  overflow-y: auto;
  background-color: #dbd2d2;
}

.input-box {
  width: 100%;
  height: 172px;
  opacity: 1;
  background: rgba(242, 243, 245, 1);

}

效果图如下： 底下箭头样式为：input-box justify-content: center 和 align-items: center 分别表示水平和垂直居中