javascript - 如何始终使用 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;
}

我想渲染具有以下约束的 child :

• 它们垂直居中
• 如果他们的高度不相等，他们应该拉伸(stretch)以填补空隙

白色间隙是我想避免的。 <知识库> 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/