css 自动继承width100%问题？

Question

今天同事遇到这样一个问题，如下图所示的布局

上面的布局希望，在浏览器窗口大小改变的时候，黄色的div宽度依然左右居中，宽度被自己的子元素撑开，但是却没有达到想要的效果，如下图所示：

经过查阅发现是黄色的div继承了父元素的100%的width属性。请问怎么解决这个问题呢？

Answer 1

你的布局其实有矛盾的地方：你希望黄色盒子宽度由绿色盒子撑开，但又希望黄色盒子居中。那撑开多大才是头啊，100%？那也算居中吧，其实想要有居中的效果，就是给黄色的盒子设置一个最大宽度；
左右居中一般有两种：
1.固定宽度盒子，使用margin:0 auto;其适用于宽度固定的block元素；
2.宽度不固定，但由其内容或者子元素决定，父元素设置：text-align：center，这种一般适用于inline-block或者inline元素。但其有个特点。

Answer 2

不定宽度的水平居中？先给个demo你看看还有什么问题。
demo

Answer 3

不是用CSS的calc函数，vw宽度的情况下
你只能使用JS监听resize事件，来动态计算黄色框中绿色框的宽度(要设定绿色框的个数)

使用calc函数+ vw 将相对简单些

黄色框{
    width:calc(100vw - 2*左右间距)
}

绿色框{
    width:calc( 100% / 绿色框每行个数);
}