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
57
58
59
60
61
62
63
64
|
<!DOCTYPE html>
<html>
<head>
<title>CSS Regions: auto-height regions in auto-height flexbox with flex basis</title>
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution">
<link rel="help" href="http://www.w3.org/TR/css3-regions/#propdef-break-after">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-basis">
<meta name="flags" content="ahem">
<meta name="assert" content="Test checks that the computed height of auto-height regions placed in a flex
container takes into the account the flex basis property. The space available inside the flex container should
be distributed according to the flex basis property. In this particular case, each of the three regions must
have a height equal to one third of the flex container's height.">
<link rel="match" href="reference/autoheight-regions-in-autoheight-flexbox-003-ref.html">
<style>
.content {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
color: green;
flow-into: flow;
}
.flex {
display: flex;
min-height: 120px;
flex-direction: column;
}
.region {
flex: 1 1 33%;
flow-from: flow;
}
.break {
/* Current (Jul 2013) standard way of region breaking */
break-after: region;
/* Old, non-standard but implemented way of region breaking */
region-break-after: always;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>Test passes if you see three horizontal green stripes.</li>
<li>You shouldn't see any red.</li>
</ul>
<div class="content">
XXXX<br><div class="break"></div>
XXXX<br><div class="break"></div>
XXXX<br>
</div>
<div class="flex">
<div class="region"><p class="red"> </p></div>
<div class="region"> </div>
<div class="region"> </div>
</div>
</body>
</html>
|
