Html 如何将CSS Flexbox与具有不同高度的div一起使用

我有一个包含五个不同面板的页面，每个面板都有不同的高度，其中一些面板有不同的宽度。我一直想使用CSS Flexbox，在需要响应时，这些面板将堆叠在彼此的顶部

我遇到的问题是，当我尝试使用CSS Flexbox时，它会将所有div设置为完全相同的高度，这并不是我想要的

以下是生成HTML的Haml：

.property-information
  .general-information-panel
     enough content for a height of 60px;
  .government-information-panel 
     enough content for a height of 100px;
  .owner-information-panel 
     enough content for a height of 80px;

CSS:

---

是否可以使用CSS Flexbox，使用具有不同高度的div或panel？

我开始了一个片段，但我不确定您的期望值。
一个模式将非常感激

在那之后，我可以试着通过编辑这个片段来帮助你

容器{
显示器：flex；
弯曲方向：行；
调整内容：灵活启动；
调整项目：灵活启动；
柔性包装：包装；
边框：1px纯红；
宽度：300px；
}
划船{
宽度：200px；
高度：50px；
}
#a{
背景色：#fad390；
}
#b{
背景色：#f8c291；
宽度：100px；
高度：100px；
}
#c{
背景色：#6a89cc；
}
#d{
背景色：82ccdd；
宽度：300px；
高度：300px；
}
#e{
背景色：#b8e994；
}

---

与其尝试回答，并可能发现问题偏离了轨道，不如要求澄清，帮助OP更好地定义问题。然后回答。不这样做会导致问题和答案飘忽不定。

.property-information{
  font-size: 15px;
  opacity: .75;
  display: inline-flex;
  justify-content: space-between;
}

.general-information-panel{
  background-color: #e7f5fe;
  width: 400px;
}
.government-information-panel{
  background-color: #e7f5fe;
  width: 500px;
}
.property-owner-information-panel{
  background-color: #e7f5fe;
  width: 400px;
}