Css容器在调整内部内容大小时不会同时增长

您可以在此处测试CSS：

好的，我的css中的问题是下一个问题，我有一个名为win_container_gen的容器，这个容器在其他div的内部相对位置，这个div在内部被称为win_container，改变它的高度和宽度，当加载这个css示例的演示站点时，首先可以看到它的div带有黑色边框，这是一个普通的容器，正如你所看到的，这个容器比里面的内容要小，问题在于它的高度

我尝试使用“高度自动”和“最大高度”等来修复此问题，但结果是一样的，一般容器不会随着内部内容的增长而增长

我不知道这是否有什么诀窍，但我的问题是这个

我如何才能使普通容器与内部内容保持相同的时间和高度，以避免显示比内部容器更小的内容

win_container_gen{ 位置：相对位置； 宽度：350px； 高度：300px； 保证金：自动； 边框：4px实心111； } 赢得冠军{ 位置：相对位置； 宽度：100%； 高度：35px； 线高：35px； 保证金：自动； 字体系列：Arial； 字体大小：14px； 颜色：fff； 左：1%； 背景色：111； -webkit边框左上半径：5px； -webkit边框右上角半径：5px； -左上角moz边界半径：5px； -moz边框半径右上角：5px； 边框左上半径：5px； 边框右上角半径：5px； } 温丘集装箱{ 位置：相对位置； 宽度：100%； 身高：100%； 左边距：自动； 右边距：自动； 边框：0px实心； 背景色：eee； } 胜利者{ 位置：相对位置； 宽度：100%； 高度：40px； 线高：40px； 光标：nwse调整大小； 背景颜色：灰色； 底部：0； -webkit边框右下半径：5px； -webkit边框左下半径：5px； -moz边框半径右下角：5px； -moz边框半径左下角：5px； 边框右下半径：5px； 边框左下半径：5px； } iframe{ 显示：块； 宽度：100%； 身高：100%； }

---

问题是您定义了高度：内部元素的高度为100%，但是您有更多的元素，因此所有元素的总高度都将超过100%，因此存在溢出。一个简单的解决方法是依靠flexbox，而不是高度：100%使用flex:1使内部容器填满其他元素留下的剩余空间：

win_container_gen{ 宽度：350px； 高度：300px； 显示器：flex； 弯曲方向：立柱； 保证金：自动； 边框：4px实心111； } 赢得冠军{ 位置：相对位置； 高度：35px； 线高：35px； 字体系列：Arial； 字体大小：14px； 颜色：fff； 左：1%； 背景色：111； 边框左上半径：5px； 边框右上角半径：5px； } 温丘集装箱{ 弹性：1； 边框：0px实心； 背景色：eee； } 胜利者{ 高度：40px； 线高：40px； 光标：nwse调整大小； 背景颜色：灰色； 边框右下半径：5px； 边框左下半径：5px； } iframe{ 显示：块； 宽度：100%； 身高：100%； }

---

或者，使用高度：calc100%-75px；在win_容器上。75px是win_container_gen内另外两个div的高度。Flexbox似乎最灵活，不过：