Javascript 如何始终使用flexbox填充父高度？

我有以下HTML：

<div class="admonition info">
  <p class="admonition-title">Info</p>
  <p>Text here</p>
</div>

我想对孩子们进行以下约束：

• 它们垂直居中
• 如果它们的高度不相等，则应拉伸以填补间隙

白色的间隙是我想要避免的

---

HTML是通过降价生成的，我实际上无法控制结构。这可以用一种简单的方式实现吗？Javascript，jquery也可以，但我更喜欢在CSS中这样做。

只需使用

对齐项：拉伸使项目填充父级高度

然后，您的图标需要手动居中，我已使用以下工具完成了此操作：

.admonition > .admonition-title {
  display: flex;
  align-items: center;
  justify-content: center;
}


您还有其他更改吗？如果我只改变它，我会得到这样的渲染：（）是的，如果你看看我的JSFIDLE，我已经做了一些其他的小更改来正确对齐“图标”。感谢添加的细节，现在我得到了它。
.admonition > .admonition-title {
  display: flex;
  align-items: center;
  justify-content: center;
}