OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <script src="../../../resources/check-layout.js"></script> |
| 3 <p>There should be a navajowhite square below, and a horizontal scrollbar. No re
d should be seen.</p> |
| 4 <div id="outerFlex" style="display:flex;"> |
| 5 <div> |
| 6 <div style="-webkit-columns:3; -webkit-column-gap:10px; width:320px;"> |
| 7 <div style="display:flex; height:150px;"> |
| 8 <!-- Scrollable flex item. Its height will be stretched or (in t
his case) shrunk to |
| 9 fill the containing flex container. --> |
| 10 <div style="overflow-x:auto; overflow-y:hidden; flex:1;"> |
| 11 <!-- Invalid column spanner, since the nearest block formatt
ing context isn't |
| 12 the one established by the multicol container. --> |
| 13 <div data-expected-width="100" style="-webkit-column-span:al
l; height:100px; background:navajowhite;"></div> |
| 14 |
| 15 <!-- Add something that causes a scrollbar. Leave 50px blank
for the scrollbar. --> |
| 16 <div style="width:200%; margin-top:50px; height:150px; backg
round:red;"></div> |
| 17 </div> |
| 18 </div> |
| 19 <!-- We want the previous flexbox to live in only one column, so add
some spacing to |
| 20 make the multicol container tall enough for that. --> |
| 21 <div style="height:300px;"></div> |
| 22 </div> |
| 23 </div> |
| 24 </div> |
| 25 <script> |
| 26 checkLayout("#outerFlex"); |
| 27 </script> |
OLD | NEW |