forked from WebKit/WebKit
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path011.html
More file actions
56 lines (51 loc) · 1.13 KB
/
011.html
File metadata and controls
56 lines (51 loc) · 1.13 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<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>