html - div中的文本区域宽度问题

Question

我只是想把一个textarea放到一个div里，我觉得应该问题不大:

代码

.panel {
  width: 250px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #000;
}
.panel textarea {
  width: 100%;
}

<div class="panel">
  <textarea></textarea>
</div>

这是一个非常困难的代码，不是吗？我们所有人都这样做了数千次。

由于某些原因，textarea 右侧的宽度有问题。检查 .panel 的盒子模型似乎不错。

在 FF、Chrome、Edge 中试过，到处都是相同的结果。

谁能解释一下，这是为什么，解决方案是什么？

我做了一个 jsFiddle只是为了好玩。

Answer 1

你应该申请box-sizing:border-box普遍而不仅仅是 div

*,
*::before,
*::after {
  box-sizing: border-box;
}
.panel {
  width: 250px;
  padding: 10px;
  border: 1px solid #000;
}
.panel textarea,
.panel input {
  width: 100%;
}

<div class="panel">
  <textarea></textarea>
  <input type="text" />
</div>