行全体を埋めるテキストボックスがあるとします。私はそれに次のようなスタイルを与えます：
input.wide {display:block; width: 100%}幅はテキストボックスの内容に基づいているため、これにより問題が発生します。テキストボックスには、デフォルトでマージン、ボーダー、パディングがあり、幅が100％のテキストボックスはコンテナよりも大きくなります。
たとえば、ここの右側：
テキストボックスがコンテナの幅を超えて拡大することなく、コンテナの幅を満たす方法はありますか
ここに私が何を意味するかを示すいくつかのHTMLの例があります：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
#outer{border: 1px solid #000; width: 320px; margin: 0px;padding:0px}
#inner{margin: 20px; padding: 20px; background: #999;border: 1px solid #000;}
input.wide {display:block; margin: 0px}
input.normal {display:block; float: right}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<input type="text" class="wide" />
<input type="text" class="normal" />
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>これを実行すると、「通常の」テキストボックスを見ると、「幅の広い」テキストボックスがコンテナの外に突き出ていることがわかります。「通常の」テキストボックスは、コンテナの実際の端にフロートします。「通常の」テキストボックスのように端を超えて拡大することなく、「幅の広い」テキストボックスをコンテナいっぱいに表示しようとしています。