To prevent a text field from being resized, you can use the CSS resize property with its "none" value. Specifies the width of the textarea based on the number of visible character widths. Add this piece of code to your textarea style: name: text: Assigns a name to the input control. The /form > … textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; } View Demo Setting the box-sizing to border-box allows the textarea to respect its parent container's padding and border, recalculating what 100% actually means. div { border:1px solid red; padding:5px; } textarea { width:100%; border:1px solid blue } Admittedly the gap on the right is smaller so it doesn’t look perfect. The content of this element represents the initial value of the control. !DOCTYPE html > html > style > #demo { resize: both; overflow: auto; width: 100%; } /style > body > form > textarea id= "demo" rows= "6" cols= "50" > This textarea has covered 100% width. We will use the following Student model class … readonly: readonly textarea controls are useful to collect or edit long runs of text like messages, files' contents, lists, reviews, articles, etc.. Now you can use height and width property to provide a fixed height and width to the element. In your case you want to fix the