0

I want the textarea to be stretchable in height. But the fixed (max-)height prevents this.
I thought the overflow-y: scroll; would fix this, but as you can see in the snippet, it doesn't.

Why doesn't the textarea stretches and why won't the button go down behind the border?

div {
 display: flex;
 flex-direction: column;
 width: 400px;
 max-height: 70px;
 overflow-y: scroll;
 border: 1px solid red;
}
<div>
  <textarea></textarea>
  <button>Save</button>
</div>
Jelmer Overeem
  • 359
  • 1
  • 10

1 Answers1

1

It happens because of the display: flex. you can simply wrap the text area inside an element:

.a {
 display: flex;
 flex-direction: column;
 width: 400px;
 max-height: 70px;
 overflow-y: scroll;
 border: 1px solid red;
}


textarea{
  width:100%;
  box-sizing: border-box; /* for 100% width https://stackoverflow.com/questions/271067/how-can-i-make-a-textarea-100-width-without-overflowing-when-padding-is-present */
}
<div class="a">
  <div class><textarea></textarea></div>
  <button>Save</button>
</div>
ATP
  • 2,939
  • 4
  • 13
  • 34
  • 1
    @JelmerOvereem I edited the answer for 100% width https://stackoverflow.com/questions/271067/how-can-i-make-a-textarea-100-width-without-overflowing-when-padding-is-present – ATP Mar 01 '21 at 19:12