<!DOCTYPE html>
<!--
 | Combined tests for basic functionality of CSS Flexible Box Layout Module.
 |   https://www.w3.org/TR/css-flexbox-1
 | This test also shows some differences with Chrome due to missing
 | implementation of content-based minimum size.
 -->
<html>
<head>
<style>
  body {
    margin: 0px;
    font-family: Roboto;
    background-color: #808080;
    font-size: 12px;
  }
  .sized {
    width: 250px;
    height: 250px;
  }
  .vsized {
    height: 40px;
  }
  .small {
    width: 100px;
    min-height: 40px;
  }
  .flex {
    display:flex;
    color: #99b9f3;
    background-color: #ffee00;
    opacity: 0.75;
  }
  .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; #space-between;
    min-width: 2px;
    padding: 2px;
    border: 2px solid #000060;
    outline: 2px solid #00f000;
    margin: 6px;
  }
  .item {
    flex: 1 1 100px;
    background-color: #0047ab; /* blue */
    margin: 2px;
    order: 0;
  }
  .blue {
    background-color: #0047ab;
  }
  .green {
    background-color: #007700;
  }

</style>
</head>
<body>

<span>
  <div style="display: inline-block; width: 200px">
    <div class="flex container" style="width: 600px;">
      <span class="blue" style="flex-basis: 1%;">SSS3bwa</span>
    </div>
    <div class="flex container" style="width: 600px;">
      <span class="blue" style="width: 1%;">SSS3bwb</span>
    </div>

  </div>
</span>

Overlapped
<div class="vsized flex container" style="">
  <span class="blue" style="flex-basis: 20%; margin: 0px; border: 0px; padding: 0px; align-self:center;">WWWW</span>
  <span class="blue" style="flex-basis: 95%; margin: 0px; border: 0px; padding: 0px; align-self:center;">XXXX</span>
</div>
[5]

(1)
<div class="small inlineflex container">
  <span class="blue" style="flex-basis: 20%;">a</span>
</div>
(2a)
<div class="inlineflex container">
  <span class="blue">AAa</span>
</div>
(2b)
<div class="inlineflex container">
  <span class="blue" style="overflow:hidden; flex-basis: 20px;">AAb</span>
</div>
(2c)
<div class="inlineflex container">
  <span class="blue" style="overflow:hidden; flex-basis: 20px; max-width:21px;">AAc</span>
</div>
(3)
<div class="inlineflex container green">
<div class="inlineflex container">
  <span class="blue" style="overflow:hidden; flex-basis: 50%;">DDD</span>
</div>
</div>
(4a)
<div class="vsized inlineflex container">
  <span class="blue" style="flex-basis: 12%;">VVVV</span>
</div>
(4b)
<div class="vsized inlineflex container">
  <span class="blue" style="flex-basis: 12%; max-width:25px;">VVVV</span>
</div>
(5)
<div class="vsized inlineflex container" style="min-width: 100px">
  <span class="blue" style="flex-basis: 12%; max-width:25px;">VVVV</span>
</div>
(6)
<div class="vsized inlineflex container" style="max-width: 5px;">
  <span class="blue">VVVV</span>
</div>
(7)
<div class="vsized inlineflex container" style="max-width: 5px; overflow: visible;">
  <span class="blue">VVVV</span>
</div>
(8)

<div class="flex" style="flex-flow: row wrap; height:75px; ">

<div>block first</div>
<div style="position: abolute;">block abs</div>
anonymous item 3

<div style="margin-left:auto; margin-right:auto">block middle</div>
<span style="display:inline; margin-left:auto;">
    span item 4a
    <span style="display: block">"span 4b"</span>
    span item 4c
</span>
</div>


</body>
</html>