为什么即使将box-sizing设置为border-box，填充也会有效地创建min-width和min-height，以及如何处理呢？

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>