CSS3中width属性的calc()使用问题

恭喜博主今天又踩到了一个坑，继滚动条问题解决后博主在测试过程中又发现了一个问题。由于博主的左侧菜单可以折叠，博主在折叠打开左侧菜单过程中发现右侧主题内容的宽度显示不正常，上图说明：

1. 初始渲染显示正常：
   
2. 折叠菜单显示正常：
   
3. 问题来了，再次打开发现显示不正常：
   

博主通过谷歌的开发者工具发现了问题，之前的内容宽度为1306px，但是经过折叠宽度就变成了1346px。因为内容宽度用的是CSS3的calc属性，于是猜测与此有关。后来经过实验，发现calc在初始渲染和之后的动态渲染时对padding的计算机制不太相同，并且有一些问题。博主因为设置了padding:20px，这里正好多了40px，于是在计算时多减去40px。

.main {
  //原来减230px
  width: calc(100% - 270px);
  padding: 20px;
}

发现果然正常了，而且初始化时也和原来一样正常：

博主现在只是调整好了样式的问题，但是至于问题产生的原因和里面的原理还不是很清楚，希望路过的大神帮忙解答一下午，感激不尽！