Auto size input height to fit content until a max height as the user types

Ask us anything How do I?
1

I have a multi-line input that I want to size with the input content, as the use types until it reaches a maximum height, then the user can scroll.

The input is inside a div with height = auto, that div is inside a container div with other divs, per the image. I want my center div to start out full height, as shown, and as the use types, it should shrink while the input div expands until the max 300px.

I tried binding to “fit-content” on the min-height and on the height with no effect.

How do I make this work?

input-height-fit
input-height-fit778×690 37.7 KB

Note: my center div contains a list and it allows scrolling if the list expands beyond it’s display size.