|
1 <!DOCTYPE html> |
|
2 <!-- |
|
3 Any copyright is dedicated to the Public Domain. |
|
4 http://creativecommons.org/publicdomain/zero/1.0/ |
|
5 --> |
|
6 <html> |
|
7 <head> |
|
8 <title>CSS Test: Testing a horizontal flex container with box-sizing:border-box</title> |
|
9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> |
|
10 <meta charset="utf-8"> |
|
11 <style> |
|
12 .container { |
|
13 display: flex; |
|
14 width: 110px; |
|
15 height: 30px; |
|
16 border: 5px solid black; |
|
17 box-sizing: border-box; |
|
18 } |
|
19 .itemA { |
|
20 flex: 1 28px; |
|
21 background: purple; |
|
22 border: 1px solid indigo; |
|
23 } |
|
24 .itemB { |
|
25 flex: 1 48px; |
|
26 background: teal; |
|
27 border: 1px solid lightblue; |
|
28 } |
|
29 </style> |
|
30 </head> |
|
31 <body> |
|
32 <div class="container"> |
|
33 <div class="itemA"></div> |
|
34 <div class="itemB"></div> |
|
35 </div> |
|
36 </body> |
|
37 </html> |