<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>
Codebase Browser
chromium