为什么填充可以有效地创建最小宽度和最小高度，即使将框大小设置为边框框，以及如何处理它?

Question

带填充的div 不能小于其填充允许的大小。

这是预期行为吗？如果是这样，我们该如何处理？

div {
display: inline-block;
height: 50px;
width: 1px; /* Why won't it? */
padding: 10px;
box-sizing: border-box;
background: grey;
animation: animate-width 4s ease-in-out infinite;
}
@keyframes animate-width {
0% { width: 50px }
50% { width:  1px }
100% { width: 50px }
}

<div></div>
<div style="padding: 0"></div>

Answer 1

解决方案是考虑一个父元素，您可以强制其宽度等于 0 并隐藏溢出：

.parent {
display: inline-block;
animation: animate-width 4s ease-in-out infinite;
background:red;
overflow:hidden;
}
.parent > div {
height: 50px;
padding: 10px;
box-sizing: border-box;
background: grey;
min-width:0;
width:100%;
}
@keyframes animate-width {
0% {
width: 50px
}
50% {
width: 1px
}
100% {
width: 50px
}
}

<div class="parent"><div></div></div>
<div class="parent"><div style="padding: 0"></div></div>

Answer 2

是的，这是预期行为 - 填充是元素维度的一部分。关于"我们如何处理它"：在您的特定情况下，您还可以对填充进行动画处理：

div {
display: inline-block;
height: 50px;
width: 1px;
/* Why won't it? */
padding: 10px;
box-sizing: border-box;
background: grey;
animation: animate-width 4s ease-in-out infinite;
}
@keyframes animate-width {
0% {
width: 50px
}
50% {
width: 1px;
padding: 0;
}
100% {
width: 50px
}
}

<div></div>
<div style="padding: 0"></div>