# Resize Input Based on content **URL:** \ **Category:** Ask us anything\ **Created:** [September 10, 2023, 6:37pm UTC](https://community.weweb.io/t/resize-input-based-on-content/4274 "2023-09-10T18:37:10Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![mark](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mark/32/4163_2.png) [@mark](https://community.weweb.io/u/mark)\ **Post date:** [September 10, 2023, 6:37pm UTC](https://community.weweb.io/t/resize-input-based-on-content/4274/1 "2023-09-10T18:37:10Z")
Hi, I have a single line input that I want to resize based on the value so that it shows the full value until the max width is hit. I thought “auto” on width would do this but instead it doesnt. Instead of overflowing I just want the input box width to increase. I’m assuming there is something simple that I’m missing right? ---
**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\ **Post date:** [September 10, 2023, 6:48pm UTC](https://community.weweb.io/t/resize-input-based-on-content/4274/2 "2023-09-10T18:48:18Z")
Check if the width is not set, if it isn’t bind it to “fit-content”, check also parent elements, if they’re not set on something fixed. I know this can be done, because I did it with multiselect I think. ---
**Author:** ![mark](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mark/32/4163_2.png) [@mark](https://community.weweb.io/u/mark)\ **Post date:** [September 10, 2023, 6:54pm UTC](https://community.weweb.io/t/resize-input-based-on-content/4274/3 "2023-09-10T18:54:11Z")
Hi, this is how I set it up with the fit content but it still doesnt work. The parent div isnt restricting the size, its much bigger. ![Screenshot 2023-09-10 at 12.51.58 PM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/24bf07c975db3441b09cc30f8c53373522184586.png) ---
**Author:** ![stevedesignerd](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/stevedesignerd/32/8487_2.png) [@stevedesignerd](https://community.weweb.io/u/stevedesignerd)\ **Post date:** [September 13, 2024, 2:25pm UTC](https://community.weweb.io/t/resize-input-based-on-content/4274/4 "2024-09-13T14:25:23Z")
Hey Mark were you able to solve this? ---
**Author:** ![mark](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mark/32/4163_2.png) [@mark](https://community.weweb.io/u/mark)\ **Post date:** [September 20, 2024, 2:35am UTC](https://community.weweb.io/t/resize-input-based-on-content/4274/5 "2024-09-20T02:35:32Z")
No I never have, still looking for a solution. I tried to do it with code but couldnt get it to work. ---
**Author:** ![Vi56](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/vi56/32/11392_2.png) [@Vi56](https://community.weweb.io/u/Vi56)\ **Post date:** [September 21, 2024, 1:53pm UTC](https://community.weweb.io/t/resize-input-based-on-content/4274/6 "2024-09-21T13:53:49Z")
Same issue, the only non-elegant solution I found is to set the width proportional to the input text length. ---
**Author:** ![djoz](https://avatars.discourse-cdn.com/v4/letter/d/ecc23a/32.png) [@djoz](https://community.weweb.io/u/djoz)\ **Post date:** [August 6, 2025, 12:04am UTC](https://community.weweb.io/t/resize-input-based-on-content/4274/7 "2025-08-06T00:04:45Z")
Set a max height (i.e. like the max you want your chatbox or input to expand to) then add `field-sizing` and `resize` to the Custom CSS i found that adding “resize: none;” to the CSS give the clean expandable text element without the manual resizing click-drag element at the bottom corner ```auto field-sizing: content; resize: none; ```