Rendering flexbox children across columns
[WebKit-https.git] / LayoutTests / fast / multicol / flexbox-rows.html
1 <!DOCTYPE html><html class=''>
2     <head><style>
3         .wrapper {
4             -webkit-column-count: 2;
5             -moz-column-count: 2;
6             column-count: 2;
7         }
8         
9         .row {
10             display: -webkit-box;
11             display: -ms-flexbox;
12             display: flex;
13         }
14         
15         .pad-rows .row {
16             padding-top: 12px;
17         }
18         
19         /**
20          * Other styles
21          */
22         .description {
23             margin: 0 1em;
24             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
25             font-size: 14px;
26             line-height: 1.5;
27         }
28         .description > ul > li + li {
29             margin-top: 1em;
30         }
31         .description em {
32             font-size: 0.875em;
33             color: darkgray;
34         }
35         
36         input {
37             margin-left: 1em;
38         }
39         
40         hr {
41             margin: 1em 0;
42         }
43         </style></head><body>
44             <div class="description">
45                
46             <div class="wrapper">
47             <div class="row"><label>Label</label><input type="text"></div>
48             <div class="row"><label>Label</label><input type="text"></div>
49             <div class="row"><label>Label</label><input type="text"></div>
50             <div class="row"><label>Label</label><input type="text"></div>
51             <div class="row"><label>Label</label><input type="text"></div>
52             </div>
53             <hr>
54             <div class="wrapper pad-rows">
55             <div class="row"><label>Label</label><input type="text"></div>
56             <div class="row"><label>Label</label><input type="text"></div>
57             <div class="row"><label>Label</label><input type="text"></div>
58             <div class="row"><label>Label</label><input type="text"></div>
59             <div class="row"><label>Label</label><input type="text"></div>
60             </div>
61             
62             </body></html>