设置字段集中 textarea 的最大宽度答案

【问题标题】：Set max-width for textarea within fieldset设置字段集中 textarea 的最大宽度
【发布时间】：2021-04-15 05:30:08
【问题描述】：

我想将文本区域的拉伸限制为父字段集的 100%。

根据这个问题，当父级是 div 时，它可以工作： How can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only)

现在使用 fieldsets 这似乎不起作用：http://jsfiddle.net/b4oLy135/7/

HTML

<fieldset id="container">
    <textarea></textarea>
</fieldset>

CSS

textarea {
    max-width: 50%;
}
#container {
    max-width: 80%;
    border: 1px solid red;
}

我在这里错过了什么？

【问题讨论】：

标签： css textarea fieldset

【解决方案1】：

您可以执行以下操作。

#container {
  position: relative;
  max-width: 80%;
  overflow: none;
  border: 1px solid red;
  height: 100px;
  margin: 0;
  padding: 5px;
}

textarea {
  position: absolute;
  display: block;
  width: 40%;
  max-width: calc(100% - 15px);
  height: 40%;
  max-height: calc(100% - 15px);
 }

<fieldset id="container">
    <textarea></textarea>
</fieldset>

这样textarea 只能调整为其父fieldset 的宽度和高度。

【讨论】：

【解决方案2】：

如果您的字段集中有多个<input>，则绝对定位不起作用。

我的解决方案是在每个 <textarea> 字段上使用一个包装器，这样我就可以使用 the solution I referred to in t the question。

重要提示： ~~在父级上使用% 时不起作用。~~ 使用% 并拉伸父级超过200% 时存在错误。

这是我目前的小提琴： https://jsfiddle.net/d23hgb8w/3/

HTML

<fieldset>
    <div class="textarea__wrapper">
      <textarea></textarea>
    </div>
    
    <input>
</fieldset>

CSS

.textarea__wrapper {
  border: 1px solid red;
  width: 500px;
}

textarea {
  max-width: 100%;
 }

【讨论】：