html - CSS:设置宽度等于内容

我在寻找一种方法，使一个div像它最大的孩子一样宽。
情况：

<container>
  <div1></div1>
  <inner_container>
    <item1>
    <item2>
    <item3>
    ...
  </inner_container>
</container>

https://jsfiddle.net/hmman06s/1/
注：

item width is fix (using background image)
item margin is fix
container width is in %

现在我想要，div1和inner_container的项目行一样宽。
如图所示：

但是使用inline-block，根据屏幕宽度，我得到如下结果：
查看绿色额外空间：

这是css唯一的方法吗？
谢谢你的帮助！

最佳答案

您可以使用CSS@media查询来获得所需的效果。
如果container小于24px宽度，viewport小于inner_container宽度，则120px始终小于container宽度。
如果您的项目是inner_container宽的，并且在144px的两边都有一个边距，那么您只希望viewport在每次其内部宽度达到80px的倍数时展开。
如果我们在项目行的左侧和右侧添加10px填充（使inner_container另一个100px更宽），我们现在有足够的信息来计算所有12px断点：
十个项目需要1168px的视区（10 x 100px+24px+144px）
九个项目需要1068px的视区（9x 100px+24px+144px）
八个项目需要968px的视区（8x 100px+24px+144px）
七个项目需要868px的视区（7 x 100px+24px+144px）
六个项目需要768px的视区（6x 100px+24px+144px）
五个项目需要668px的视区（5x 100px+24px+144px）
因此：

@media only screen and (max-width: 1267px) {  /* 10 items */
inner-container {width: 1024px;}
}

@media only screen and (max-width: 1167px) {  /* 9 items */
inner-container {width: 924px;}
}

@media only screen and (max-width: 1067px) {  /* 8 items */
inner-container {width: 824px;}
}

@media only screen and (max-width: 967px) {  /* 7 items */
inner-container {width: 724px;}
}

@media only screen and (max-width: 867px) {  /* 6 items */
inner-container {width: 624px;}
}

@media only screen and (max-width: 767px) {  /* 5 items */
inner-container {width: 524px;}
}