-
Notifications
You must be signed in to change notification settings - Fork 3.8k
Expand file tree
/
Copy pathflex-shrink-001.html
More file actions
41 lines (41 loc) · 1.22 KB
/
flex-shrink-001.html
File metadata and controls
41 lines (41 loc) · 1.22 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
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Flexbox Test: flex-shrink - number(positive)</title>
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="author" title="Shiyou Tan" href="mailto:[email protected]">
<link rel="help" title="7.3.2. The 'flex-shrink' property" href="http://www.w3.org/TR/css-flexbox-1/#flex-shrink-property">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="The flex-shrink property set positive number determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed">
<style>
#container {
background-color: red;
display: flex;
height: 100px;
width: 100px;
}
#container div {
height: 100px;
width: 100px;
}
#test1 {
flex-shrink: 2;
}
#test2 {
background-color: green;
flex-shrink: 3;
}
#cover {
background-color: green;
height: 100px;
margin-top: -100px;
width: 60px;
}
</style>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="container">
<div id="test1"></div>
<div id="test2"></div>
</div>
<div id="cover"></div>
</body>