Javascript 如何防止调整大小的文本区域溢出页面？

我正在创建一个文本区域，该区域在页面中水平和垂直居中。考虑到我需要TextArea垂直居中，我不能让TextArea为100w和100h，我需要它从一个小的高度开始，然后随着用户的输入而增长。我还需要一个点击捕捉器，所以如果用户点击textarea周围的区域，textarea就会聚焦。（灰色bkg仅用于调试目的）

我在这里有一个关于CodePen的演示：

autosize（document.getElementById（“note”）；
$（“.textAreaClickCapturer”）.mouseup（函数（）{
$（“#注”）.focus（）；
});
html，正文{
保证金：0；
填充：0；
显示器：flex；
弯曲方向：立柱；
身高：100%；
宽度：100%；
}
.page-body.fullScreen{
显示器：flex；
弹性：1；
弯曲方向：立柱；
身高：100%；
宽度：100%；
背景：#efef；
文本对齐：左对齐；
填充：0！重要；
对齐项目：正常；
证明内容：正常；
}
形式{
宽度：100%；
身高：100%；
显示器：flex；
对齐项目：居中；
}
表单.文本区域单击捕获器{
宽度：100%；
身高：100%；
显示器：flex；
溢出：隐藏；
对齐项目：居中
}
表单字段{
宽度：100%；
保证金：0；
填充：24px；
明确：两者皆有；
最大高度：最大含量；
身高：100%；
对齐项目：居中；
}
文本区{
边界：无；
边界半径：0；
字号：21px；
线高：28px；
填充：0；
垂直对齐：顶部；
宽度：100%；
文本对齐：居中；
}

我想你可以使用
最大宽度
和
最大高度
：

textarea {
  ...
  max-width: 100%;
  max-height: 100%;
}

更新

我简化了HTML和CSS，代码片段：


autosize（document.getElementById（“note”）；
$（“.textAreaClickCapturer”）.mouseup（函数（）{
$（“#注”）.focus（）；
});
html、正文、表单{
身高：100%；
}
身体{
背景：#efef；
保证金：0；
}
形式{
显示器：flex；
对齐项目：居中；/*垂直居中*/
填充：24px；
框大小：边框框；
}
文本区{
字体大小：20px；
文本对齐：居中；
宽度：100%；
最大宽度：100%；
最大高度：100%；
框大小：边框框；
}

我想你可以使用
最大宽度
和
最大高度
：

textarea {
  ...
  max-width: 100%;
  max-height: 100%;
}

更新

我简化了HTML和CSS，代码片段：


autosize（document.getElementById（“note”）；
$（“.textAreaClickCapturer”）.mouseup（函数（）{
$（“#注”）.focus（）；
});
html、正文、表单{
身高：100%；
}
身体{
背景：#efef；
保证金：0；
}
形式{
显示器：flex；
对齐项目：居中；/*垂直居中*/
填充：24px；
框大小：边框框；
}
文本区{
字体大小：20px；
文本对齐：居中；
宽度：100%；
最大宽度：100%；
最大高度：100%；
框大小：边框框；
}
我在你的笔中尝试了以下方法：

在CSS中的文本区域选择器中，添加：

最大高度：90%；
溢出：自动

如果输入的内容超过最大高度，则会显示一个滚动条，最大高度由包含div的大小控制。
我在您的笔中尝试了以下操作：

在CSS中的文本区域选择器中，添加：

最大高度：90%；
溢出：自动

如果输入的内容超过最大高度，则会显示一个滚动条，最大高度由包含div的大小控制。
添加一个最大高度，就像其他人所说的，我个人认为，在您的情况下，当涉及高度时，我更喜欢使用vh。所以在你的笔里，它只是：

textarea {
  border: none;
  border-radius: 0;
  font-size: 21px;
  line-height: 28px;
  padding: 0;
  vertical-align: top;
  width: 100%;
  text-align: center;
  max-height:50vh;
}

然后你就被摆平了。默认情况下，您的垂直溢出是滚动的，因此您真的不需要再做任何事情。
添加一个最大高度，就像其他人所说的，我个人认为，在您的情况下，当涉及高度时，我更喜欢使用vh。所以在你的笔里，它只是：

textarea {
  border: none;
  border-radius: 0;
  font-size: 21px;
  line-height: 28px;
  padding: 0;
  vertical-align: top;
  width: 100%;
  text-align: center;
  max-height:50vh;
}

然后你就被摆平了。默认情况下，您的垂直溢出是滚动的，因此您真的不需要再执行任何操作。
主要原因是，当使用
对齐项：居中和/或
对齐内容：居中时，元素在上/下溢出其父元素

为了解决这个问题，我们需要使用自动边距来代替，这样就可以控制垂直和水平、上/下、左/右等对齐方式

您的代码中也有很多
height:100%
（我已经清理过了），再加上Flexbox，会导致更多的问题，因此请改用Flexbox自己的属性，例如，在flex列项上使用这里的
flex:1
，这将填充父项的高度

还添加了
minheight:0
，这样Firefox就可以玩了


堆栈片段


autosize（document.getElementById（“note”）；
$（“.textAreaClickCapturer”）.mouseup（函数（）{
$（“#注”）.focus（）；
});
html，
身体{
保证金：0；
身高：100%；
}
身体{
显示器：flex；
弯曲方向：立柱；
}
.page-body.fullScreen{
弹性：1；
显示器：flex；
弯曲方向：立柱；
背景：#efef；
最小高度：0；
}
形式{
弹性：1；
显示器：flex；
弯曲方向：立柱；
最小高度：0；
}
表单.文本区域单击捕获器{
弹性：1；
显示器：flex；
弯曲方向：立柱；
最小高度：0；
}
表单字段{
弹性：1；
显示器：flex；
弯曲方向：立柱；
最小高度：0；
填充：24px；
}
文本区{
边界：无；
边界半径：0；
字号：21px；
填充：0；
宽度：90%；
文本对齐：居中；
溢出：自动；
保证金：自动；
}
主要原因是，当使用
对齐项目：居中和/或
对齐内容：居中时，元素会在上/下两个位置溢出其父元素

为了解决这个问题，我们需要使用自动边距来代替，这样就可以控制垂直和水平、上/下、左/右等对齐方式

你也哈