为 fieldset 中的 textarea 设置最大宽度

问题描述

我想将 textarea 的拉伸限制为父字段集的 100%。

根据this question它的工作原理，当父母是一个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;
}    

我在这里遗漏了什么？

解决方法

您可以执行以下操作。

#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 的宽度和高度。

,

如果您的字段集中有多个 <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%;
 }