100% 宽度的 Textarea 填充容器，但 100% 宽度的 div 扩展父级答案

【问题标题】：Textarea at 100% width fills container but div at 100% width expands the parent100% 宽度的 Textarea 填充容器，但 100% 宽度的 div 扩展父级
【发布时间】：2017-08-06 06:24:51
【问题描述】：

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

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

我检查了源代码，我看到的只是 textarea 的宽度设置为 100%，没有其他样式影响它。

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

【问题讨论】：

包含代码的图像基本上是没有价值的。请链接到一个实时示例，创建一个 jsfiddle 或使用 SO 上可用的 sn-p 工具。

标签： html css textarea width

【解决方案1】：

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

谢谢，

【讨论】：

【解决方案2】：

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

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

你可以阅读更多关于box-sizing here的信息。

【讨论】：

你看到图片了吗？我不确定填充如何影响这一点。我在 div 标签中添加了 box-sizing 并且没有任何变化。
我们看不到图像。我们在这里看到代码。看看这些图像，它确实看起来像是一个box-sizing 问题。如果您需要更多帮助，请添加您的代码或演示小提琴。

【解决方案3】：

我猜你只需要使用border box：

*{ box-sizing: border-box; }

【讨论】：

很遗憾，这对文本没有影响。
@Steve 那你能举一个活生生的例子吗？