<!DOCTYPE html>
<!--
 | Combined tests for basic functionality of CSS Flexible Box Layout Module.
 |   https://www.w3.org/TR/css-flexbox-1
 | This test focuses on content-based minimum size.
 -->
<html>
<head>
<style>
  body {
    margin: 0px;
    font-family: Roboto;
    background-color: #808080;
    font-size: 12px;
  }
  .inlineflex {
    display:inline-flex;
    color: #99b9f3;
    background-color: #ffee08;
    opacity: 0.75;
  }
  .container {
    overflow: hidden;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
    align-content: flex-end;
    min-width: 2px;
    padding: 2px;
    border: 2px solid #000060;
    outline: 2px solid #00f000;
    margin: 6px;
  }
  .blue {
    background-color: #0047ab;
  }
  .hidden {
    overflow: hidden;
  }
  .visible {
    overflow: visible;
  }

</style>
</head>
<body>

<div class="inlineflex container" style="max-width: 20px;">
  <span class="blue">HHHHH</span>
</div>

<div class="visible inlineflex container" style="max-width: 20px;">
  <span class="blue">VVVVV</span>
</div>

<div class="visible inlineflex container" style="max-width: 20px;">
  <span class="hidden blue">HHHHH</span>
</div>

<div class="inlineflex container" style="max-width: 20px;">
  <span class="blue" style="min-width: 5px;">mHHHm</span>
</div>

<div class="visible inlineflex container" style="max-width: 20px;">
  <span class="blue" style="min-width: 5px;">mVVVm</span>
</div>

</body>
</html>