Javascript 元素不固定

我遇到了一个常见问题，即如果使用灰色三角形本身操纵

div输入区域的大小（
调整大小图标
），则
固定在
底部
右侧
的元素（
调整大小图标
）最终会“移动”出位置

是否有黑客或修复程序？

显然，我可以编写一些JS来解决这个问题，但我希望它可以通过HTML或CSS进行修改

重现问题的步骤：

选择蓝色文本区域
按enter键多次，使文本区域展开
通过灰色三角形手动调整窗口大小
再按enter键几次


const resizeIcon=document.getElementById（'resize-icon'），
inputArea=document.getElementById（'input-area'）
让cursorX，
草率的，
输入，
inputH
resizeIcon.onmousedown=函数（e）{
document.addEventListener（'mousemove'，calculate）
cursorX=e.clientX
粗略地
inputW=inputArea.offsetWidth
inputH=输入区域。离视
}
常数计算=（e）=>{
xDifference=（e.clientX-cursorX）*2//如果文本框居中
y差异=e.clientY-粗略
调整大小（XDDifference，yDifference）
}
常量大小=（x，y）=>{
宽度=输入w+x+‘px’
高度=inputH+y+‘px’
inputArea.style.width=宽度
inputArea.style.height=高度
}
document.onmouseup=函数（）{
document.removeEventListener（'mousemove'，calculate）
}
正文{
保证金：0；
}
#输入区{
宽度：20vw；
最大宽度：90vw；
最小宽度：10vw；
高度：自动；/*为20vh，这导致了更多问题*/
最小高度：20vh；
位置：绝对位置；
最高：1%；
左：50%；
转化：translateX（-50%）；
溢出：隐藏；
框大小：边框框；
背景#f2f2；
边框：纯红1px/**/
}
#用户输入{
宽度：100%；
高度：自动；
填充：10px；
字体系列：arial；
空白：预包装；
字体大小：24px；
框大小：边框框；
边框：纯蓝1px/**/
}
#用户输入：焦点{
大纲：无；
}
#调整图标大小{
宽度：50px；
高度：50px；
位置：固定；
右：0；
底部：0；
变换：旋转（45度）平移（50%，50%）；
变换原点：100%100%；
背景：#ccc；
}

好的，所以在CSS中我设置了
#输入区域{height:auto}
，它在某些情况下解决了这个问题，但是我仍然可以在手动调整
#输入区域的大小后，通过使用灰色三角形来打破它。你可以更新对代码片段的更改吗？@YongQuan当然可以！顺便说一句，代码笔已经更新了。我认为没有JS是无法实现的。调整
输入区域的大小时，JS会在其上添加
宽度
和
高度
样式属性，覆盖CSS计算，而
调整图标大小
的CSS计算仅依赖CSS而非内联样式。