Textarea位置绝对推送父div

Question

大家好，这里的 CSS 新手，

我有一个特殊情况，我想在 div 的边缘放置一个文本区域。即使用户在文本区域中键入内容，我也希望文本区域被裁剪。即使我已将父 div 溢出设置为 hidden，为什么 textarea 会增长并推动父 div 的位置，我对此深感困惑？有什么想法可以让 textarea 的位置保持原样（裁剪）？

我的代码如下：

HTML

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

CSS

.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;
}

这是我的Codepen的链接

感谢您的任何想法和建议。

Answer 1

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

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

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

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

您的 html 代码不正确。我使用 max-width 作为 textarea。