Quiero que mis controles de área de texto sigan el comportamiento estándar de diseño de pantalla de bloque, para que se expandan al ancho del elemento primario que lo contiene. Simplemente configurandodisplay:block; no hará esto: tienen el valor predeterminado predeterminado. Ajustewidth:100%; no funciona porque cualquier relleno en los controles significa que se derraman sobre los límites del contenedor.

HTML:

<div class='container'>
    <div >test</div>
</div>
<div class='container'>
    <textarea >test</textarea>
</div>​

CSS:

.container {
    width:300px;
    border:black solid 1px;
    margin:10px;
}
.container > div {
    display:block;
    padding:10px;
    background:red;
}
.container > textarea {
    display:block;
    padding:10px;
    background:red;
}

​ RESULTADO

http: //jsfiddle.net/hKcjc