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

Question

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

我想要两件事：

• 如果两个孩子小于主元素的总高度，第二个孩子应该填补空白
• 如果两个子元素的高度超过主元素的总高度，则主元素应展开以适应两个 div，并且页脚应向下推

Answer 1

使用带有 flex-direction 列的 flexbox，并在主目录上设置 min-height，然后允许第二个孩子成长，而不是第一个孩子

*{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;
}

<main>
  <div class="div1"><p>image with dinamic height</div>
  <div class="div2"><p>div with information about the page</div>
</main>