Tamás Szelei Tamás Szelei - 6 months ago 16
Javascript Question

How to always fill the parent height using flexbox?

I have the following HTML:

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


And 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;
}


I would like to render the children with the following constraints:


  • They are vertically centered

  • If their height is not equal, they should stretch to fill the gaps



Current rendering

The white gaps are what I would like to avoid. Live on JSFiddle

The HTML is generated from markdown and I don't really have control over the structure. Is this possible to implement in a simple way? Javascript, jquery is also OK, but I'd prefer to do this in CSS.

Answer

Just use align-items: stretch; to make the items fill the parent height.

Then, your icon will need to be centered manually, I have done it with:

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

https://jsfiddle.net/4mw8a08x/

enter image description here