使HTML元素扩展以适合内容

我正在编写一个web应用程序，主要是在AngularJS中使用CSS的flexbox进行一些布局，如果有必要的话。在过去的几个小时里，我一直在发疯，试图解决我目前遇到的问题

我遇到的问题如下： 一页上有两个并排的

div

s。最左边的

div

是一个菜单，它必须始终是文档内容或浏览器窗口的高度（以较大者为准）。最右边的

div

是动态添加内容的div。当程序启动时，最右边的

div

小于浏览器窗口的高度（因为它没有太多的内容），但随着应用程序的进行，内容会添加到其中，从而最终比浏览器窗口长得多

可以找到显示问题的JSFIDLE

fiddle的HTML结构基本上是固定的（可以添加容器，但不应该删除），因为这是对具有相同基本结构的复杂应用程序的极大简化。此外，我之所以将所有CSS高度设置为100%，完全是因为我阅读了另一个答案，而不是因为我知道这需要他们来完成（不过，我确实希望菜单以全屏显示，即使内容很少）

黑色的

div

代表菜单，黄色的

div

代表保存内容的菜单。单击“click me to add content”（单击我添加内容）按钮时，会将100行内容追加到content div中，使其比窗口长。理想的效果是黄色和黑色的

div

s都可以展开，这样黄色的div就可以容纳内容，而黑色的

div

与黄色的

div

一样高。相反，当添加内容时，所发生的事情（如您所见）既不是黑色的，也不是黄色的

div

s扩展，内容只是在黄色

div

的边界之外流动

我已经在stackoverflow和其他地方尽了最大的努力研究了这个问题，但没有任何解决方案适用于这种类型的动态内容（尽管我可能遗漏了一些东西，也可能遗漏了一些东西）。这些答案喜欢并建议在某些元素上使用

minheight

属性，但当我尝试时，黑色和黄色的

div

s开始变小（内容的大小，而不是整个浏览器的高度），但没有正确展开。基本上，当我尝试其他人的解决方案时，我可以选择一个小的

div

s（小于全屏）并正确增长，或者选择一个正确的开始（全屏，即使初始内容较小），但不会增长，但不能两者兼而有之（我希望

div

s能够正确增长以适应内容）. 此外，答案（例如）建议将

min height

和

height

组合起来，以实现一种或另一种效果，但不是我想要的两种效果

我真的很感激能得到的任何帮助，谢谢你抽出时间

编辑：

截短版，适用于赶时间的人

---

我希望能够使两个并排的

div

s从浏览器窗口的整个高度开始，即使其中没有内容。然后，当向其中一个

div

s添加足够的内容使其大于浏览器时，两个

div

s都会展开以适合可用的内容。JSFiddle可在以下位置获得。小提琴的问题是，当按下“添加新内容”按钮时，黄色和黑色的

div

s无法展开以适应新内容。

您可以使用

显示：表格单元格来实现这一点。请检查。
您可以使用
display:table cell
实现此功能。请检查。
使用
flexbox
我提出了这个结构，它似乎符合您最初的标准

我在中添加了一个带有额外高的“extender”div的演示，这样您可以在添加大量内容时看到效果


*{
保证金：0；
填充：0；
框大小：边框框；
}
html，
身体{
最小高度：100%；
}
.包装纸{
显示器：flex；
弯曲方向：立柱；
边框：1px纯红；
最小高度：100vh；
}
主要{
柔性生长：1；
边框：1px纯红；
身高：100%；
显示器：flex；
}
.左{
宽度：200px；
背景：浅蓝色；
flex：无；
}
.对{
柔性生长：1；
背景：鲑鱼；
}

固定左
灵活权利
使用
flexbox
我提出了这个结构，它似乎符合您最初的标准

我在中添加了一个带有额外高的“extender”div的演示，这样您可以在添加大量内容时看到效果


*{
保证金：0；
填充：0；
框大小：边框框；
}
html，
身体{
最小高度：100%；
}
.包装纸{
显示器：flex；
弯曲方向：立柱；
边框：1px纯红；
最小高度：100vh；
}
主要{
柔性生长：1；
边框：1px纯红；
身高：100%；
显示器：flex；
}
.左{
宽度：200px；
背景：浅蓝色；
flex：无；
}
.对{
柔性生长：1；
背景：鲑鱼；
}

固定左
灵活权利
从这个问题开始玩弄CSS——我能够让您的示例正常工作，同时大大简化了CSS

技巧似乎是从
body
元素开始
flex
ing，并告诉容器增长，但绝不收缩：

body {
    display: flex;
    flex-direction: column;
}

.container, .subContainer {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    flex-grow: 1;
}

用完整的代码更新了JSFIDLE（
不需要，如果您不需要它做其他事情，可以将其删除）：
从这个问题开始使用CSS——我能够让您的示例正常工作，同时大大简化了CSS

技巧似乎是从
body
元素开始
flex
ing，并告诉容器增长，但永远不要