浮动父 div 增长到浮动子 div 的假设宽度答案

【问题标题】：Floating parent div grows to hypothetical width of floating child div浮动父 div 增长到浮动子 div 的假设宽度
【发布时间】：2018-01-22 23:30:55
【问题描述】：

我有一个浮动的父元素和一个也浮动的子元素，加上一些内容给子元素一些尺寸，如下：

<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 如果没有宽度限制的宽度，即子 div 从其中的文本延伸的宽度一行而不是换行。

但是，孩子被设置为更窄，那么为什么父母也不会缩小到那个范围呢？我怎样才能让它做到这一点？

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

【问题讨论】：

【解决方案1】：

来自spec：

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

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

如果没有宽度限制，父 div 的宽度与子 div 的宽度相同，即子 div 从其中的文本中获得的宽度仅延伸一行而不是换行。

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

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

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

【讨论】：