使用动态兄弟创建父级的div填充高度

Question

我有一个带有容器和两个孩子的html结构。第一个子项是动态大小的图像，第二个是动态大小的div。

我想要两件事：

• 如果两个孩子小于主要元素的总高度，则第二个孩子应该填满空白区域
• 如果两个孩子的高度高于主要元素的总高度，则主元素应该扩展以适应两个div并且页脚应该被按下

Answer 1

将flexbox与flex-direction列和 min - 设置在main上，然后允许第二个子项增长，而不是第一个

detectChanges(): Checks the change detector and its children.

*{box-sizing:border-box}

main{
  min-height:500px;
  display:flex;
  flex-direction:column
}

.div1{
  flex:0;
  height: 100px; /*for demonstration only, leave it undeclared (auto)*/
  border:2px solid orange; 
  color:orange
}

.div2{
  flex: 1 0 auto;
  border: 2px solid lightblue;
  color:lightblue;
}