家长没有考虑孩子的填充

Question

http://codepen.io/anon/pen/Keisz/＆lt; - 简单示例

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

应用

box-sizing:border-box;

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

非常感谢您提供的任何帮助！

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

Answer 1

从内容div中删除height和width属性。瞧

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

Answer 2

除非你申请box-sizing:border-box;，否则父母不会在包裹子div时考虑填充。你需要应用这种风格。否则你发布的代码工作得很好（它忽略了最里面的div上的20px填充，而父代绕着子div的宽度减去了w子div上的填充）。

只需从父div中删除max-height，就可以了

Answer 3

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

#innerContainer {
    display: block;
    overflow: hidden;

}

FIDDLE