Question

我有一个浮动的父元素和一个也浮动的子元素，加上一些内容可以为子元素提供一些维度，如下所示：

<div id="parent">
  <div id="child">
    WWWWWWW WWWWWWW WWWWWWW
  </div>
</div>

儿童的宽度受限于width和min-width：

#parent {
  width: auto;
  float: left;
}

#child {
  width: 16%;
  min-width: 150px;
  float: left;
}

我期望发生的是父div与子div的宽度相同，而不是100％，因为它已浮动。

虽然不是，但会发生什么。父div之间有一些宽度。似乎发生的情况是父div具有子div 所具有的宽度，如果它不是宽度限制的，即孩子从其伸展的文本中获得的宽度仅仅一行而不是包装。

然而，孩子会变得更窄，为什么父母也不会缩小呢？我怎么能这样做呢？

查看http://jsbin.com/wipafizocu/edit?html,css,output上使用一些着色来显示div的完整示例。您应该看到黑色父框不会延伸到灰色背景的整个宽度，但也比红色子框宽。

Answer 1

来自spec：

如果包含块的宽度取决于此元素的宽度，则在CSS 2.2中未定义结果布局。

父宽度和子宽度之间存在循环依赖关系。由于父级有width: auto，其宽度是根据here所述的缩小到拟合算法计算的，从而导致您观察到的行为，即

如果父div没有宽度限制，那么父div具有子div所具有的宽度，即子节点从文本中获得的宽度只能拉伸一行而不是包裹。

然后将子宽度计算为父对象宽度的百分比。如果父母再次收缩以适应孩子，那么孩子将不再是父母宽度的16％，并且必须重新计算其宽度。你可以看到它的发展方向。

因此，实现同意不会多次计算任一元素的宽度。请注意，指定最小宽度不会影响任何此行为。

这里没有太多解决方案;甚至flexbox都没有帮助，因为你依赖于未定义的行为。您可能需要重新考虑您的布局。