<!DOCTYPE html>
<!--
All divs here should shrinkwrap to fit their content, except for fill-available
-->
<style>
    @import "resources/height-keyword-classes.css";

    body * {
        border: 2px solid red;
        padding: 5px;
        clear: both;
    }

    .container {
        height: 500px;
        border-color: blue;

        display: inline-block;
        width: 100px;
    }

    iframe {
      width: 50px;
    }

    .small {
      height: 1px;
    }

    .big {
      height: 300px;
    }

    .really-big {
      height: 1000px;
    }
</style>
<div class="container">
  <iframe class="min-content">
  </iframe>

  <iframe class="max-content">
  </iframe>

  <iframe class="fit-content">
  </iframe>
</div>

<div class="container">
  <iframe class="fill-available">
  </iframe>
</div>

<div class="container">
  <iframe class="small min-height-min-content">
  </iframe>

  <iframe class="small min-height-max-content">
  </iframe>

  <iframe class="small min-height-fit-content">
  </iframe>
</div>

<div class="container">
  <iframe class="small min-height-fill-available">
  </iframe>
</div>

<div class="container">
  <iframe class="big max-height-min-content">
  </iframe>

  <iframe class="big max-height-max-content">
  </iframe>

  <iframe class="big max-height-fit-content">
  </iframe>
</div>

<div class="container">
  <iframe class="really-big max-height-fill-available">
  </iframe>
</div>
