css - MVC 4 データ検証メッセージがフォームの幅を広げる

Question

モデルの非常に単純なフォームを作成しています。検証を使用して、足場付きの「編集」ビューを生成しました。1 つの検証は「URL」タイプ用であり、問​​題を引き起こしています。

私はこれを視野に入れています：

<div class="editor-label">
        @Html.LabelFor(model => model.Server)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Server)
        @Html.ValidationMessageFor(model => model.Server)
</div>

これは、ビューによってレンダリングされるすべてを含む #content セクションの css です。

#content
{
    border:solid;
    border-width:thin;
    position:relative;
    margin-left: auto ;
    margin-right: auto ;
    text-align:center;
    margin-top: 50px;
    min-width:480px;
    max-width:800px;
    display:table;
    padding: 30px;
}

ページが読み込まれると、#content の幅は 480 ピクセルになり、内部の要素はできるだけ多くのスペースを占有します (エディター フィールド要素と送信ボタンのある要素は 100% に設定され、css で幅が設定されているものは他にありません)。

「必須」の検証メッセージがフィールドに表示されると、すべて正常に機能します (幅は変わりません)。

無効な URL を入力すると、メッセージが長くなり (ローカライズされたデフォルト メッセージのバージョンでは、「Pole Server neobsahuje plně kvalifikovanou adresu URL protokolu http, https nebo ftp.」と表示されます)、#content 全体の幅が 657 ピクセルに変更されます。

検証メッセージが表示される前の幅を維持し、css 設定で長すぎる場合に検証メッセージを折り返す方法はありますか?

固定幅の設定 (メイン セクションと検証メッセージの div を含むすべての要素) を避けたいと思いますが、レイアウト テンプレートとその css はユニバーサルのままにして、特定のシナリオに合わせて調整する必要なく繰り返し使用し続けることができるようにします。

前もって感謝します

どのように見えるかを示すスクリーンショットを含めました