子元素进入新行后，内联块元素获得全宽答案

【问题标题】：Inline-block element gets full width after childs break into new line子元素进入新行后，内联块元素获得全宽
【发布时间】：2015-08-31 19:54:38
【问题描述】：

我认识到，如果子元素的数量超过一行，那么内联块元素会获得 100% 的宽度：

<div style="background-color:red;padding:5px">
    <div style="display:inline-block;background-color:green;padding:5px">
        <div class="cube"></div>
        <div class="cube"></div>
        <div class="cube"></div>
        <div class="cube"></div>
        <div class="cube"></div>
        <div class="cube"></div>
    </div>
</div>
<style>
.cube{ 
    background-color:yellow;
    width:100px;
    height:100px;
    display:inline-block;
}
</style>

https://jsfiddle.net/xhj075fr/5/

我想要的是这样的行为：

有没有办法通过内联块来完成这项工作？目标是，在这样的居中 div 内获得一个左对齐的网格（绿色 div 的宽度应基于适合一行的立方体的数量）：

【问题讨论】：

其实这是一个非常出乎意料的行为。谁能解释它为什么会这样工作以及为什么有意义？
@connexo，不确定，但由于未设置宽度，宽度=父宽度？（100%，默认）？
我很想听听@boltclock 对此的看法。
..绿色 div 内应该有多少黄色 div ......？？我的意思是连续最大黄色 div 数？
这是一个很常见的问题。所有宽度缩小以适应元素（display:inline-block、float:left 等）的工作方式相同。如果内容的宽度之和大于父宽度，则取所有可用的父宽度。如果父宽度是浏览器宽度的函数，并且立方体是固定宽度，那么您可以使用媒体查询来设置适当的父宽度，否则 JavaScript 是您唯一的解决方案。

标签： html css

【解决方案1】：

试试这个：

<div style="background-color:red;width:500px;padding:5px">
<div style="margin:auto;width:82.6%;background-color:green;padding:5px">
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
</div>

如果问题没有解决，请回来！

【讨论】：

我打赌 OP 不想定义宽度，但希望它基于适合一行的立方数。
是的，宽度应该基于适合该行的立方体的数量
我敢打赌，除了设置子容器的固定宽度（容器有，盒子有，为什么子容器没有呢？）之外，没有解决办法，或者使用完全不同的标记/css 或 javascript...所以，这个答案实际上提供了不错的解决方案。
我已经更新了问题并删除了父 div 的 500px-width，因为它具有误导性。主要目标是使左对齐网格以动态宽度的父 div 为中心