<textarea>は右下にカーソルを合わせてドラッグすることでサイズを変更できます。
大量の内容を入力する場合やフィールドのサイズを調整する必要がある場合がありますが、サイズを大きくしすぎるとレイアウトが崩れる可能性があります。
そのため、この記事では<textarea>のリサイズを禁止したり制御したりする方法を紹介したいと思います。

textareaのリサイズを無効にする方法

<textarea>をリサイズ出来るかどうかはresizeプロパティの値で変わります。

デフォルトの状態

デフォルトの状態ではresizeプロパティはbothが設定されています。
<textarea>はデフォルトの状態だと縦横ともにリサイズをすることが出来るようになっています。

textarea{
    resize: both; /* 初期値 */
}

デフォルトの状態はこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

リサイズを禁止

resizeプロパティをnoneにすることで<textarea>のリサイズを禁止します。

textarea{
    resize: none;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

縦方向のリサイズを禁止

resizeプロパティをhorizontalにすることで<textarea>を横方向のみリサイズ出来るようにし、縦方向のリサイズを禁止します。

textarea{
    resize: horizontal;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

横方向のリサイズを禁止

resizeプロパティをverticalにすることで<textarea>を縦方向のみリサイズ出来るようにし、横方向のリサイズを禁止します。

textarea{
    resize: vertical;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

リサイズの最大値・最小値を設定

横のリサイズの場合、max-widthプロパティとmin-width、縦のリサイズの場合、max-heightプロパティとmin-heightプロパティを設定することでリサイズの最大値と最小値を設定することが出来ます。

textarea{
    max-width: 500px;
    min-width: 300px;
    max-height: 200px;
    min-height: 50px;
    width: 400px;
    height: 100px;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

まとめ

いかがでしか？
textareaのリサイズを禁止することで予期せぬレイアウト崩れを防ぐことが出来ます。
完全に禁止しなくても最大値と最小値を設定しておくことは有効だと思います。