Css Flexbox上下文中的句柄文本区域自动高度

我知道已有的主题已经发布在textarea的自动高度主题上，使用了

this.height=this.scrollHeight

技术，或者使用

contenteditable

元素

我选择了这条路，看起来更干净了。。。 在“按原样”使用时工作正常，但在flexbox容器中完全失效

我试着用

max height

和

min height

在任何地方都能找到一些解决方案，但没有成功

问题是当在“textarea”内添加新行时，文本溢出到外部。。。当我想让textarea自动“推”它的上限时（不是向下！） 抑制新行时也存在同样的问题，我没有更新元素的高度

CSS

HTML

应用程序标题
标题
我认为这将有助于您：


//使用“autoExpand”类全局应用于所有文本区域
const autoexpandingtextraces=document.queryselectoral（'.autoExpand'）
对于（让aeta自动展开文本区域）{
aeta.addEventListener（'input'，event=>{
console.log(
“高度”，event.currentTarget.style.height，
“\n滚动高度”，event.currentTarget.scrollHeight
)
//event.currentTarget.style.height=event.currentTarget.scrollHeight+'px'
})
}
html，正文{
身高：100%；
}
身体{
背景：浅灰色；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-ms-flex方向：列；
弯曲方向：立柱；
}
* {
填充：0；
保证金：0；
框大小：边框框；
}
*：焦点{
大纲：0；
}
.应用程序标题{
背景：矢车菊蓝；
填充：20px；
}
.tchat容器{
--t容器宽度：300px；
--t容器填充：20px；
宽度：var（--t容器宽度）；
填充：var（--t容器填充）；
右边填充：0；
保证金：30像素自动；
背景色：白色；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-ms-flex方向：列；
弯曲方向：立柱；
盒影：2px2px8pxRGBA（0,0,0,0.3）；
高度：计算（100vh-188px）；
}
部分{
溢出y：自动；
溢出x：隐藏；
}
文章{
背景#FDD835；
边界半径：6px；
填充物：5px；
保证金：5px；
}
.tchat页脚{
显示：表格；
表布局：固定；
宽度：100%；
边缘顶部：20px；
}
.自动展开{
-webkit-box-flex:1；
-ms-flex:1；
弹性：1；
背景色：白色；
边框：1px纯色浅灰色；
填充物：5px10px；
边界半径：6px；
宽度：75%；
显示：表格单元格；
垂直对齐：中间对齐；
}
.自动展开：焦点{
边框颜色：矢车菊蓝；
}
.按钮容器{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
}
钮扣{
高度：40px；
宽度：40px；
边界半径：50%；
字体大小：12px；
边界：无；
}
.应用程序页脚{
填充：20px；
文本对齐：居中；
背景：黑色；
不透明度：0.8；
颜色：白色；
}
应用程序标题
标题
一些非常长的测试内容包装和溢出。。。
一些非常长的测试内容包装和溢出。。。
一些非常长的测试内容包装和溢出。。。
一些非常长的测试内容包装和溢出。。。
一些非常长的测试内容包装和溢出。。。
一些非常长的测试内容包装和溢出。。。
一些非常长的测试内容包装和溢出。。。
一些非常长的测试内容包装和溢出。。。
一些非常长的测试内容包装和溢出。。。
一些非常长的测试内容包装和溢出。。。
一些非常长的测试内容包装和溢出。。。
一些非常长的测试内容包装和溢出。。。
一些非常长的测试内容包装和溢出。。。
一些非常长的测试内容包装和溢出。。。
一些非常长的测试内容包装和溢出。。。
一些非常长的测试内容包装和溢出。。。
一些非常长的测试内容包装和溢出。。。
一些非常长的测试内容包装和溢出。。。
一些非常长的测试内容包装和溢出。。。
一些非常长的测试内容包装和溢出。。。

发送
应用程序页脚
我认为这将帮助您：


//使用“autoExpand”类全局应用于所有文本区域
const autoexpandingtextraces=document.queryselectoral（'.autoExpand'）
对于（让aeta自动展开文本区域）{
aeta.addEventListener（'input'，event=>{
console.log(
“高度”，event.currentTarget.style.height，
“\n滚动高度”，event.currentTarget.scrollHeight
)
//event.currentTarget.style.height=event.currentTarget.scrollHeight+'px'
})
}
html，正文{
身高：100%；
}
身体{
背景：浅灰色；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-ms-flex方向：列；
弯曲方向：立柱；
}
* {
填充：0；
保证金：0；
框大小：边框框；
}
*：焦点{
大纲：0；
}
.应用程序标题{
背景：矢车菊蓝；
填充：20px；
}
.tchat容器{
--t容器宽度：300px；
--t容器填充：20px；
宽度：var（--t容器宽度）；
填充：var（--t容器填充）；
右边填充：0；
保证金：30像素自动；
背景色：白色；
显示：-网络工具包盒；
显示：-ms flexbox；
D
html, body { height: 100%; }
body {
  background: lightgrey;
  display: flex;
  flex-direction: column;
}

*:focus { outline: 0; }

.app-title {
  background: cornflowerblue;
  padding: 20px;
}

.tchat-container {
  width: 300px;
  padding: 20px 0 20px 20px;
  margin: 30px auto;
  background-color: white;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}

section {
    overflow-y: auto;
    overflow-x: hidden;
}

article {
  background: #FDD835;
  border-radius: 6px;
  padding: 5px;
  margin: 5px;
}

.tchat-footer {
  display: flex;
  padding-right: 20px;
  margin-top: 20px;
  border: 1px dashed;
}

.autoExpand {
  flex: 1;
  margin: 0;
  background-color: white;
  border: 1px solid lightgrey;

  padding: 10px;
  border-radius: 6px;
}

.autoExpand:focus {
  border-color: cornflowerblue;
}

button {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  margin-left: 20px;
  border: none;
}

.app-footer {
  padding: 20px;
  text-align: center;
  background: black;
  opacity: 0.8;
  color: white;
}

<header class='app-title'>APP TITLE</header>
<div class='tchat-container'>
  <header>Title</header>
  <section>
    <article>Something very long to test content wrapping and overflow...</article>
    <article>Something very long to test content wrapping and overflow...</article>
    <article>Something very long to test content wrapping and overflow...</article>
    <article>Something very long to test content wrapping and overflow...</article>
    <article>Something very long to test content wrapping and overflow...</article>
    <article>Something very long to test content wrapping and overflow...</article>
    <article>Something very long to test content wrapping and overflow...</article>
    <article>Something very long to test content wrapping and overflow...</article>
    <article>Something very long to test content wrapping and overflow...</article>
    <article>Something very long to test content wrapping and overflow...</article>
    <article>Something very long to test content wrapping and overflow...</article>
    <article>Something very long to test content wrapping and overflow...</article>
    <article>Something very long to test content wrapping and overflow...</article>
    <article>Something very long to test content wrapping and overflow...</article>
    <article>Something very long to test content wrapping and overflow...</article>
    <article>Something very long to test content wrapping and overflow...</article>
    <article>Something very long to test content wrapping and overflow...</article>
    <article>Something very long to test content wrapping and overflow...</article>
    <article>Something very long to test content wrapping and overflow...</article>
    <article>Something very long to test content wrapping and overflow...</article>
  </section>
  <footer class='tchat-footer'>
    <p contenteditable='true' class='autoExpand' placeholder='Auto-Expanding Textarea'></p>
    <button>Send</button>
  </footer>
</div>
<footer class='app-footer'>APP FOOTER</footer>