<!DOCTYPE html>
<html>
<link href="resources/flexbox.css" rel="stylesheet">
<style>
.flexbox {
  width: 600px;
  height: 160px;
  outline: 2px solid black;
}
.item {
  height: 20px;
  background-color: green;
  margin: 5px;
}
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/check-layout-th.js"></script>
<body onload="checkLayout('.flexbox')">
<div id=log></div>

<p>The green boxes should all be within the black box</p>

<div class="flexbox column wrap" id="test">
  <div class="item" data-expected-width="290"></div>
  <div class="item" data-expected-width="290"></div>
  <div class="item" data-expected-width="290"></div>
  <div class="item" data-expected-width="290"></div>
</div>

<script>
var flex = document.getElementById("test");
flex.offsetWidth;
flex.style.height = "60px";
</script>