<div class="minheight1">
  available available
</div>
<div class="minheight2">
  min-content min-content min-content
</div>
<div class="minheight3">
  max-content max-content max-content
</div>
<div class="minheight4">
  fit-content fit-content fit-content
</div>
<div class="minheight5">
  fill-available fill-available fill-available
</div>
html, body{
  height: 100%;
}

.minheight1 {
  width: 50px;
  background-color: blue;
  min-height: available;
}

.minheight2 {
  width: 50px;
  background-color: red;
  min-height: min-content;
}

.minheight3 {
  width: 50px;
  background-color: yellow;
  min-height: max-content;
}
.minheight4 {
   width: 50px;
  background-color: green;
  min-height: fit-content;
}
.minheight5 {
  width: 50px;
  background-color: orange;
  min-height: fill-available;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.