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

Question

I want to restrict the stretching of a textarea to 100% of the parent fieldset.

According to this question it works, when the parent is a div: How can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only)

Now with fieldsets this doesn't seem to work: 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;
}    

What am I missing here?

Answer 1

You can do the following.

 #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>

This way the textarea can only be resized to the width & height of its parent fieldset .

Answer 2

If you have more then one <input> in your fieldset, absolute positioning does not work.

My solution was to just use a wrapper over every <textarea> field, so I could use the solution I referred to in t the question .

Important: Does not work when using % on the parent. There is a bug when using % and stretching over 200% of the parent.

Here is my current fiddle: 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%;
 }