浮动 parent div 增长到浮动 child div 的假设宽度

Question

我有一个浮动的parent元素和一个同样浮动的child元素，加上一些内容来给child元素一些尺寸，如下：

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

child 的宽度通过 width 和 min-width 限制：

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

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

我希望发生的是 parent div 与 child div 的宽度相同，而不是 100%，因为它是浮动的。

虽然两者都不是。 parent div 之间有一些宽度。似乎发生的情况是 parent div 的宽度与 child div 的宽度相同，如果不是 width-restricted，即 child 将从其中的文本中获得的宽度仅延伸一行而不是换行。

但是 child 设置得更窄，为什么 parent 没有缩小到那个水平？我怎样才能做到这一点？

请参阅 http://jsbin.com/wipafizocu/edit?html,css,output 上的完整示例，该示例使用一些颜色来显示 div。您应该看到黑色 parent 框没有延伸到灰色背景的整个宽度，但也比红色 child 框宽。

Answer 1

来自spec：

If the containing block's width depends on this element's width, then the resulting layout is undefined in CSS 2.2.

父子宽度之间存在循环依赖关系。由于父级有 width: auto，其宽度是根据 here 中描述的收缩以适应算法计算的，导致您观察到的行为，即

the parent div has the width that the child div would have if it wasn't width-restricted, i.e. the width that the child would get from the text in it stretching over just one line instead of wrapping.

然后计算子项的宽度占父项已用宽度的百分比。如果父级再次缩小以适合子级，则子级将不再是父级宽度的 16%，并且必须重新计算其宽度。你可以看到这是怎么回事。

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

这里没有太多的解决方案；甚至 flexbox 也无济于事，因为您依赖于未定义的行为。您可能需要重新考虑您的布局。

浮动 parent div 增长到浮动 child div 的假设宽度

Floating parent div grows to hypothetical width of floating child div

css

css-float