Skip to content

Commit f40dc05

Browse files
sammygillsammygill
authored
1 parent 473ec25 commit f40dc05

2 files changed

Lines changed: 58 additions & 0 deletions

File tree

‎css/css-flexbox/flex-base-size-ignores-max-width-ref.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Flexbox: a flex item's flex base size ignores its own max-width</title>
4+
<style>
5+
.flex {
6+
display: flex;
7+
width: 300px;
8+
}
9+
.item {
10+
flex: none;
11+
height: 50px;
12+
}
13+
.capped {
14+
width: 100px;
15+
background: green;
16+
}
17+
.uncapped {
18+
width: 200px;
19+
background: blue;
20+
}
21+
</style>
22+
<p>Test passes if the green box is exactly half the width of the adjacent blue box.</p>
23+
<div class="flex">
24+
<div class="item capped"></div>
25+
<div class="item uncapped"></div>
26+
</div>

‎css/css-flexbox/flex-base-size-ignores-max-width.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Flexbox: a flex item's flex base size ignores its own max-width</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#algo-main-item">
5+
<link rel="match" href="flex-base-size-ignores-max-width-ref.html">
6+
<meta name="assert" content="A flex item's flex base size is its content size and is not clamped by the item's own max-width; the max-width is applied later, when deriving the hypothetical main size. Both items have a 300px base size in a 300px container, so the first shrinks toward 150px, hits its 100px max-width and freezes, leaving 200px for the second.">
7+
<style>
8+
.flex {
9+
display: flex;
10+
width: 300px;
11+
}
12+
.item {
13+
min-width: 0;
14+
height: 50px;
15+
}
16+
.capped {
17+
max-width: 100px;
18+
background: green;
19+
}
20+
.uncapped {
21+
background: blue;
22+
}
23+
.content {
24+
width: 300px;
25+
height: 50px;
26+
}
27+
</style>
28+
<p>Test passes if the green box is exactly half the width of the adjacent blue box.</p>
29+
<div class="flex">
30+
<div class="item capped"><div class="content"></div></div>
31+
<div class="item uncapped"><div class="content"></div></div>
32+
</div>

0 commit comments

Comments
 (0)