父母没有根据孩子的填充调整大小答案

【问题标题】：Parent not sizing to child's padding父母没有根据孩子的填充调整大小
【发布时间】：2014-04-03 06:29:14
【问题描述】：

这个 codepen 模仿了我遇到的一个问题。我希望父元素（外部容器和内部容器）完全包含它们的内容（内容 div） - 我不知道如何实现这一点，我几乎可以肯定这是一个简单的修复。

申请

box-sizing:border-box;

到子元素不是我想要的。我希望父母将大小调整为孩子，而不是相反。

您能提供的任何帮助将不胜感激！

编辑：我认为有些混乱。我希望父级动态调整大小以包含最大的子级宽度 + 填充。遗憾的是，最大高度也是一个要求。 :(

【问题讨论】：

我认为您需要在父级上设置 position:relative 。或者也许是孩子...... float:left 也可以做到这一点，或者两者兼而有之。

标签： html css

【解决方案1】：

从内容 div 中删除高度和宽度属性。瞧

http://codepen.io/anon/pen/pluAk/

【讨论】：

这很好用，但为什么它有效？这感觉违反直觉。

【解决方案2】：

除非您应用box-sizing:border-box;，否则父级在包裹子 div 时不会考虑填充。你需要应用这种风格。否则，您发布的代码可以正常工作（它忽略了最里面 div 上的 20px 填充，并且父级环绕子 div 的宽度减去 w 子 div 上的填充）。

只需删除 @ 987654322@ 来自父 div，你很高兴

【讨论】：

你能给我一个小提琴吗？我无法重现你的结果。谢谢。

【解决方案3】：

不确定你这样做的最终目的是什么，但假设它会有所帮助，这是一个想法

#innerContainer {
    display: block;
    overflow: hidden;

}

FIDDLE

【讨论】：