Reactjs 为什么更新状态后子组件在父div之外呈现？

我正在创建一个聊天室应用程序，如下所示：

没有什么特别的，它看起来像所有其他聊天室应用

在文本框div中，我将所有消息包装在其中，并希望在有更多消息时使其可滚动

我将消息存储在状态中

  state = {
    userId: 1,
    currentRoomId: 1,
    conversation: [
      { userId: 1, user: 'a', message: 'hi' },
      { userId: 1, user: 'a', message: "How you doin'?" },
      { userId: 2, user: 'b', message: 'I am fine, thank you.' },
      { userId: 3, user: 'c', message: 'I go to school by bus.' },
    ],
  };

我将消息组件包装在textbox div中

 <div className='textBox'>
      <Messages
        conversation={this.state.conversation}
        userId={this.state.userId}
      />
    </div>

---

将“输入和发送”按钮固定的分区位置和底部0属性设置为可以获取

容器的代码，将
文本框设置为
容器
位置：绝对
@KALITA Sure，但这里的问题是，新的子组件在父组件之外呈现使具有固定的输入和发送按钮以及底部0属性的分区的位置可以获取
容器的代码，确保
文本框
容器
位置：绝对
@KALITA确保，但这里的问题是，新的子组件在父组件之外呈现
/* Chat containers */
.container {
  border: 2px solid #dedede;
  background-color: #f1f1f1;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
  width: 100%;
}

.textBox {
  height: 60vh;
}