css - 为什么填充有效地创建了最小宽度和最小高度，即使将 box-sizing 设置为 border-box，以及如何处理它？

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 并 overflow hidden :

.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>