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

Question

我有以下HTML：

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

和CSS：

.admonition {
  border: 1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.admonition > p {
  margin: 0;
  padding: 6px;
  display: block;
}

.admonition-title {
  background-color: #2B83BD;
  color: #fff;
  display: block;
  padding: 2px;
}

.admonition > .admonition-title {
  font-size: 1px;
  letter-spacing: -1px;
  color: transparent;
  width: 64px;
  text-align: center;
  vertical-align: middle;
  min-width: 60px;
}

.admonition > .admonition-title:before {
  font-family: "FontAwesome";
  font-size: 32px;
  letter-spacing: normal;
  color: #fff;
}

.admonition.info > .admonition-title:before {
  content: "\f129";
}

.admonition.info > p:not(.admonition-title) {
  background-color: #7DBAE3;
}

.admonition.info > .admonition-title {
  background-color: #2B83BD;
}

我想让孩子们有以下约束：

• 它们是垂直居中的
• 如果他们的身高不相等，他们应该伸展以填补空白

白色空白是我想避免的。 Live on JSFiddle

HTML是从markdown生成的，我实际上无法控制结构。这有可能以简单的方式实现吗？ Javascript，jquery也没关系，但我更喜欢在CSS中这样做。

Answer 1

只需使用align-items: stretch;即可让商品填充父级身高。

然后，您的图标需要手动居中，我已经完成了：

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

https://jsfiddle.net/4mw8a08x/