Html text区域位置绝对值推送父div

大家好，这里的CSS新手

我有一个特例，我想在div的边缘上放置一个文本区域。我想即使用户在文本区域中键入内容，文本区域也会被裁剪。我很困惑，为什么即使我将父div overflow设置为hidden，textarea仍会增长并推动父div的位置？有没有办法让textarea的位置保持原样（裁剪）

我的代码如下：

HTML

这是我的网站的链接

感谢您，并非常感谢您提出的任何想法和建议。

.wrapper{
宽度：300px；
高度：300px；
背景：红色；
}
.盒子{
宽度：200px；
高度：200px；
背景：蓝色；
溢出：隐藏；
位置：相对位置；
}
.文本{
最大宽度：300px；
高度：50px；
右：0；
背景：黄色；
溢出：隐藏；
位置：绝对位置；
调整大小：无；
}

.wrapper{
宽度：300px；
高度：300px；
背景：红色；
}
.盒子{
宽度：200px；
高度：200px；
背景：蓝色；
溢出：隐藏；
位置：相对位置；
}
.文本{
最大宽度：300px；
高度：50px；
右：0；
背景：黄色；
溢出：隐藏；
位置：绝对位置；
调整大小：无；
}

Hi Ishita Ray，感谢您的评论和建议。然而，我所做的是故意的，因为我计划让用户能够移动文本区域。。。我的问题源于这样一种情况：用户移动边缘上的文本区域，因此从父对象溢出。另外，我也尝试过限制文本区域相对于父边缘的宽度。。。。但是，UX wise不是很令人满意，因为texarea将向下增长（因为我希望textarea保持其宽度）。您已经提到了textarea 300px widthHi Ishita Ray，感谢您的评论和建议。然而，我所做的是故意的，因为我计划让用户能够移动文本区域。。。我的问题源于这样一种情况：用户移动边缘上的文本区域，因此从父对象溢出。另外，我也尝试过限制文本区域相对于父边缘的宽度。。。。但是，UX-wise不是很令人满意，因为texarea将向下增长（因为我希望textarea保持其宽度），您已经提到textarea 300px宽度

<div class="wrapper">
  <div class='box'>
    <textarea class="text"/>
  </div
</div>

.wrapper {
  width:300px;
  height:300px;
  background:red;
}

.box {
  width:200px;
  height:200px;
  background:blue;
  overflow:hidden;
  position:relative;
}

.text {
  width:300px;
  height:50px;
  right:-250px;
  background:yellow;
  overflow:hidden;
  position:absolute;
  resize:none;
}