CSS - 动态填充以扩展 div 以填充动态宽度

Question

所以我在宽度可变的 div 中有可变数量的元素。里面的元素之间有一个固定的空间，5px，但是每个元素都需要用padding来扩展到填充外层div空间的全宽，这样文字才能居中。

例子:

.button-container{
  width: 100%;
  height: 50px;
}
.button-container .button{
  min-width: 75px;
  display: inline-block;
  text-align: center;
  border: 1px solid #FF0000;
}
.button-container .button + .button-container .button{
  margin-left: 5px;
}

<div class='button-container'>
  <div class='button'>B1</div>
  <div class='button'>B2</div>
  <div class='button'>B3</div>
  <div class='button'>B4</div>
</div>

那么如何让按钮类元素内部的填充具有动态的左右填充来填充按钮容器类 div 的空间呢？

理想情况下，该解决方案将是仅 CSS 的解决方案，因为我不想让 jQuery 来做间距。

Answer 1

CSS 表可以在这里工作。

.button-container {
  width: 100%;
  height: 50px;
  display: table;
  border-collapse: separate;
  border-spacing: 5px;
}
.button-container .button {
  display: table-cell;
  text-align: center;
  border: 1px solid #FF0000;
  vertical-align: middle;
}

<div class='button-container'>
  <div class='button'>B1</div>
  <div class='button'>B2</div>
  <div class='button'>B3</div>
  <div class='button'>B4</div>
</div>