<div id="test_min_max" style="width:400px; height:400px; flex-wrap:wrap">

  <div id="max_width" style="width: 100px; height: 100px">
    <div style="height: 10px; max-width: 50px"></div>
  </div>

  <div id="max_height" style="width: 100px; height: 100px; flex-direction: row">
    <div style="width: 10px; max-height: 50px"></div>
  </div>

  <div id="max_width_with_child" style="width:100px; height:100px">
     <div style="height: 10px; max-width: 50px">
       <div style="width:40px; height:10px"></div>
       <div style="width:40px; height:10px"></div>
     </div>
  </div>

  <div id="max_height_with_child" style="width:100px; height:100px">
    <div style="width:50px; max-height:50px">
      <div style="width: 40px; height:40px"></div>
      <div style="width: 40px; height:40px"></div>
    </div>
  </div>

  <div id="justify_content_min_max" style="max-height: 200px; min-height: 100px; width: 100px; justify-content: center">
    <div style="width: 60px; height: 60px"></div>
  </div>

  <div id="align_items_min_max" style="max-width: 200px; min-width: 100px; height: 100px; align-items: center">
    <div style="width: 60px; height: 60px"></div>
  </div>

  <div id="justify_content_overflow_min_max" style="min-height: 100px; max-height: 110px; justify-content: center">
    <div style="width: 50px; height: 50px"></div>
    <div style="width: 50px; height: 50px"></div>
    <div style="width: 50px; height: 50px"></div>
  </div>

  <!-- with flex -->
  <div id="flex_to_min" style="min-height:100px; max-height:150px; width:100px; flex-direction: column">
    <div style="flex:1"></div>
    <div style="width:10px; height:10px"></div>
  </div>

  <div id="flex_to_min_sec" style="height:100px; max-width:150px; min-width:100px; flex-direction: row">
    <div style="flex:1"></div>
    <div style="width:10px; height:10px"></div>
  </div>

  <div id="flex_grow_within_max_width" style="width: 200px; height: 100px; flex-direction: column">
    <div style="flex-direction: row; max-width: 100px">
      <div style="height: 20px; flex: 1"></div>
    </div>
  </div>

  <div id="flex_with_little_space" style="width:100px; height:100px">
    <div style="width:60px; height:50px"></div>
    <div style="min-width:100px; width:40px; height:50px"></div>
  </div>

  <div id="flex_with_max_space" style="width:100px; height:100px">
    <div style="width:50px;height:20px"></div>
    <div style="max-width:50px; width:100px"></div>
  </div>

  <div id="flex_with_little_space_with_wrap" style="width:100px; height:100px; flex-wrap:wrap">
    <div style="width:60px; height:50px"></div>
    <div style="min-width:100px; width:40px; height:50px"></div>
  </div>

  <div id="flex_with_max_space_with_wrap" style="width:100px; height:100px; flex-wrap:wrap">
    <div style="width:50px;height:20px"></div>
    <div style="max-width:50px; width:100px"></div>
  </div>

  <div id="flex_grow_within_constrained_max_width" style="width: 200px; height: 100px; flex-direction:column">
    <div style="flex-direction: row; max-width: 300px">
      <div style="height: 20px; flex: 1"></div>
    </div>
  </div>

  <!-- min height -->
  <div id="parent_with_min_height" style="width:100px; min-height:100px">
    <div style="width:60px; height:40px"></div>
    <div style="width:60px; height:40px"></div>
  </div>

  <div id="direction_row_parent_with_min_height" style="width:100px; min-height:100px; flex-direction: column">
    <div style="width:60px; height:40px"></div>
    <div style="width:60px; height:40px"></div>
    <div style="width:60px; height:40px"></div>
  </div>

  <div id="wrap_column_with_height" style="width:100px; height:100px; flex-direction: column; flex-wrap: wrap">
    <div style="width:60px; height:40px"></div>
    <div style="width:60px; height:40px"></div>
    <div style="width:60px; height:40px"></div>
  </div>

  <div id="wrap_column_wrap_with_min_height" style="width:100px; min-height:100px; flex-direction: column; flex-wrap: wrap">
    <div style="width:60px; height:40px"></div>
    <div style="width:60px; height:40px"></div>
    <div style="width:60px; height:40px"></div>
  </div>

  <div id="min_height_with_flex_wrap" style="width:100px; min-height:100px; flex-wrap: wrap">
    <div style="width:60px; height:60px"></div>
    <div style="width:60px; height:60px"></div>
  </div>

  <!-- min width-->
  <div id="width_with_parent_min_height" style="min-width:20px; height:10px">
    <div style="width:20px; margin-left:10px"></div>
  </div>

  <div id="childs_with_min_width_flex" style="width:100px; height:100px">
    <div style="min-width:20px; height: 20px"></div>
    <div style="flex:1"></div>
  </div>

</div>