滚动条挤占内容宽度，影响布局

问题: 当容器有一定的高度(设有固定高度或者是最大高度)，但是内容高度不确定，有可能会撑开父容器产生滚动条，也有可能不产生。但是因为滚动条出现，滚动条也需要占位置，容器内容宽度就会被挤压

举个栗子:

.body {
  height: 800px;
  width: 420px;
}
.container {
  padding: 20px
  overflow-y: auto;
}
.item {
  width: 90px;
  height: 90px;
  margin-bottom: 10px;
  margin-right: calc(20px / 3); //????这样子设置的有问题
}
.item:nth(4n) {
  margin-right: 0px
}
<div class="body">
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      .......
    </div>   
</div>

没有滚动条的效果图：

image.png

上面为灰色是container灰色块，item为里面的小方块，图为四个一排的列表，当item超过4个，就会超出父元素高度，container就会产生滚动条。要求是灰色容易左右两边留白一样，中间子元素的间距相等。

未产生滚动条container容器的内容宽度是420px - 40px = 380px(父元素的宽度减去左右padding的宽度)。剩余的宽度 380px - 360px = 20px margin-right的值就为 calc(20px / 3)。
但是如果是产生滚动条，内容的宽度要再减去14px, 是366px。如果这样设置margin-right: calc(20px / 3)有滚动条的情况下，第四个元素会挤到第二排。所以item的样式margin-right不能给出固定的值。

解决1. 新属性overlay
chrome下overflow有个新的属性值overlay，这个属性简直就是为了这个问题而生，他和auto有点像，但是区别就是在触发滚动条时候并不挤压空间。但是非常遗憾，这个属性值目前只有chrome支持

.container {
    overflow-y: overlay;
}

看起来的效果像是在滚动条显示padding的空白里，没有挤压到内容区域。

有滚动条的效果:

image.png

解决2. 使用100%
设置100%指的是可用宽度，是不含滚动条的宽度,

.item {
    margin-right: calc((100% - 360px) / 3);
}

这样子设置之后，在有滚动条和滚动条时，margin-right计算的值不同。
有滚动条的效果：

image.png