Set max-width for textarea within fieldset

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