LayoutTests/fast/flexbox/011.html - WebKit - Git at Google

 <html>
 <head>
 <style>
 div {
   display: -moz-box;
   display: -webkit-box;
   display: box;
 }

 div.strut {
   border: 2px solid green;
   margin: 2px;
 }

 div.flex {
   -moz-box-flex: 1;
   -webkit-box-flex: 1;
   box-flex: 1;
   border: 2px solid purple;
   margin: 2px;
 }
 </style>
 </head>
 <body>
 <p>You should see a black box below that is the width of the content area.  It contains alternating struts
 and springs.  The struts are bordered in green and are inflexible.  The springs are bordered in purple
 and should grow and shrink as you resize your browser window.  The black box should get taller when
 you make your window wider and get shorter when you shrink your browser window.
 </p>

 <div style="padding:2px; border:2px solid black">
 <div class="strut">
 Fixed
 </div>
 <div class="flex">
 This is a flexible block, and it will shrink or grow as needed.
 </div>
 <div class="strut">
 Fixed
 </div>
 <div class="flex">
 This is a flexible block, and it will shrink or grow as needed.
 </div>
 <div class="strut">
 Fixed
 </div>
 <div class="flex">
 This is a flexible block, and it will shrink or grow as needed.
 </div>
 <div class="strut">
 Fixed
 </div>
 </div>
 </body>
	<html>
	<head>
	<style>
	div {
	display: -moz-box;
	display: -webkit-box;
	display: box;
	}

	div.strut {
	border: 2px solid green;
	margin: 2px;
	}

	div.flex {
	-moz-box-flex: 1;
	-webkit-box-flex: 1;
	box-flex: 1;
	border: 2px solid purple;
	margin: 2px;
	}
	</style>
	</head>
	<body>
	<p>You should see a black box below that is the width of the content area. It contains alternating struts
	and springs. The struts are bordered in green and are inflexible. The springs are bordered in purple
	and should grow and shrink as you resize your browser window. The black box should get taller when
	you make your window wider and get shorter when you shrink your browser window.
	</p>

	<div style="padding:2px; border:2px solid black">
	<div class="strut">
	Fixed
	</div>
	<div class="flex">
	This is a flexible block, and it will shrink or grow as needed.
	</div>
	<div class="strut">
	Fixed
	</div>
	<div class="flex">
	This is a flexible block, and it will shrink or grow as needed.
	</div>
	<div class="strut">
	Fixed
	</div>
	<div class="flex">
	This is a flexible block, and it will shrink or grow as needed.
	</div>
	<div class="strut">
	Fixed
	</div>
	</div>
	</body>