<html> <head> <style> div { display: -moz-box; display: -khtml-box; display: box; } div.strut { border: 2px solid green; margin: 2px; } div.flex { -moz-box-flex: 1; -khtml-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>