| <!DOCTYPE html> |
| <script src="../../../resources/check-layout.js"></script> |
| <p>There should be a navajowhite square below, and a horizontal scrollbar. No red should be seen.</p> |
| <div id="outerFlex" style="display:flex;"> |
| <div> |
| <div style="-webkit-columns:3; -webkit-column-gap:10px; width:320px;"> |
| <div style="display:flex; height:150px;"> |
| <!-- Scrollable flex item. Its height will be stretched or (in this case) shrunk to |
| fill the containing flex container. --> |
| <div style="overflow-x:auto; overflow-y:hidden; flex:1;"> |
| <!-- Invalid column spanner, since the nearest block formatting context isn't |
| the one established by the multicol container. --> |
| <div data-expected-width="100" style="-webkit-column-span:all; height:100px; background:navajowhite;"></div> |
| |
| <!-- Add something that causes a scrollbar. Leave 50px blank for the scrollbar. --> |
| <div style="width:200%; margin-top:50px; height:150px; background:red;"></div> |
| </div> |
| </div> |
| <!-- We want the previous flexbox to live in only one column, so add some spacing to |
| make the multicol container tall enough for that. --> |
| <div style="height:300px;"></div> |
| </div> |
| </div> |
| </div> |
| <script> |
| checkLayout("#outerFlex"); |
| </script> |
