0

This is my code.

div {
  background: orange;
  height: 200px;
  padding: 10px;
}
textarea {
  background: lightblue;
  border: 5px solid blue;
  width: 75%;
  height: 50%;
  resize: both;
}
<div>
  <textarea>foo</textarea>
</div>

When the textarea is resized to make its height greater than the height of the div, it overflows outside the div. Is there a way to make the container div automatically expand to enclose the larger textarea when the textarea is resized to increase its height?

Lone Learner
  • 18,088
  • 20
  • 102
  • 200
  • Duplicate: https://stackoverflow.com/questions/51041743/parent-element-is-not-resizing-correctly-with-child-textarea – first last Jan 21 '22 at 18:27

1 Answers1

0

changed height to min-height basically means that if he has a reason to grow - he will grow, but not be less than the value

You can do the same with the width property, or set the resize to vertical

div {
  background: orange;
  min-height: 200px;
  padding: 10px;
}
textarea {
  background: lightblue;
  border: 5px solid blue;
  width: 75%;
  height: 50%;
  resize: both;
}
<div>
  <textarea>foo</textarea>
</div>
shamgar
  • 120
  • 9