100％宽度的Textarea填充容器，但100％宽度的div扩展了父级

Question

我有一个有趣的问题，我希望有人可以提供帮助。我有一个textarea，当设置为100％宽度时，填充它所在的父div。但是，如果我用div替换它，div会将父div的宽度吹出现在适合孩子的内容而不是包装。

我尝试了各种方法（显示：inline-block，display：table，display：table-cell，box-sizing ...）我使用了span，div，p和table / tr / td ..都会导致以下溢出。

我已经检查了源码，我看到的只是textarea的宽度设置为100％，没有其他风格影响它。

我在检查时是否缺少某个属性？

Answer 1

我的猜测是你只需要使用border box：

*{ box-sizing: border-box; }

Answer 2

基本上，您的div也可能padding。现在，当您使用width: 100%添加填充时，子项将基本上溢出额外填充的父原因。

要在宽度中包含填充，请尝试提供div box-sizing: border-box;。

您可以阅读有关box-sizing here的更多信息。

Answer 3

由于应用程序的复杂性，我需要将其拆分为基础并弄清楚。我希望textarea有一个结构组件，我不知道。

谢谢，