LayoutTests/css3/flexbox/nested-stretch.html

<!DOCTYPE html>
<html>
<head>
<style>
div {
  outline: 1px solid black;
  background: hsla(210,100%,90%, .8);
  padding: 5px;
  margin: 5px; 
}

.flexbox {
  display: flex;
}

.row {
  flex-direction: row;
}

.column {
  display: flex;
  flex-direction: column;
}

.flex {
  flex: 1 0 auto;
}
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/check-layout-th.js"></script>
</head>
<body onload="checkLayout('.flexbox')">
<div id=log></div>
There should be two boxes of equal height on the left and 3 boxes of equal
height on the right.
<div class="flexbox row" style="width: 600px">
  <div data-expected-width=290 data-expected-height=220 class="column flex">
    <div data-expected-width=270 data-expected-height=95 class="flex"></div>
    <div data-expected-width=270 data-expected-height=95 class="flex"></div>
  </div>
  <div data-expected-width=290 data-expected-height=220 class="column flex">
    <div data-expected-width=270 data-expected-height=60 class="flex" style="height: 50px;"></div>
    <div data-expected-width=270 data-expected-height=60 class="flex" style="height: 50px;"></div>
    <div data-expected-width=270 data-expected-height=60 class="flex" style="height: 50px;"></div>
  </div>
</div>

None of the boxes should overflow and the inner most boxes should be end aligned.
<div class="flexbox column" style="width: 600px; height: 300px; position: relative;">
  <div data-expected-width=590 data-expected-height=250 class="column flex" style="justify-content: flex-end">
    <div data-offset-y="180" data-expected-width=570 data-expected-height=30 style="height: 20px; flex: none;"></div>
    <div data-offset-y="220" data-expected-width=570 data-expected-height=30 style="height: 20px; flex: none;"></div>
  </div>
  <div data-expected-width=590 data-expected-height=30 style="height: 20px; flex: none;"></div>
</div>


</body>
</html>