如何让div内部显示滚动条而非整个页面出现滚动条？

你的问题核心是flex容器未正确初始化，导致text-area的flex-grow:1没有生效，无法被限制在容器内，进而被内容撑大整个页面。按以下步骤修改即可：

关键修改点 #

• 给.mega添加display: flex：它是flex布局的容器，必须声明这个属性才能让子元素的flex属性生效。
• 重置html和body的默认边距：浏览器默认的margin/padding会让100vh的容器超出视口，导致页面出现滚动条。
• 给.text-area设置overflow-y: auto（替代scroll，无溢出时自动隐藏滚动条更友好），同时添加box-sizing: border-box避免内边距撑大容器。

修改后的完整CSS #

/* 重置全局默认样式 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* 彻底禁止页面滚动 */
}

.mega {
  display: flex; /* 必须添加，启用flex布局 */
  flex-direction: column;
  height: 100vh;
  max-height: 100vh;
}

.text-area {
  overflow-y: auto; /* 内容溢出时显示垂直滚动条 */
  flex-grow: 1;
  padding: 10px; /* 可选，优化内容间距 */
  box-sizing: border-box; /* 内边距不影响容器尺寸 */
}

.typing-area {
  width: 95%;
  display: flex;
  flex-direction: row-reverse;
  padding: 10px;
}

.messagebox {
  flex-grow: 1;
  margin-right: 8px; /* 可选，优化输入框和按钮间距 */
}

效果说明 #

修改后，.text-area会自动填充.mega容器除输入区域外的所有空间，当内容超出时，内部会显示滚动条，而整个页面不会被拉长，输入框始终固定在底部。

内容的提问来源于stack exchange，提问作者ICE_Plane