| <!DOCTYPE html> |
| <style> |
| .flex { |
| display: inline-flex; |
| border: thick solid; |
| height: 50px; |
| width: 50px; |
| margin: 50px; |
| } |
| |
| .i1 { |
| color: cyan; |
| background: magenta; |
| font-size: 100px; |
| } |
| |
| .auto { overflow: auto; } |
| .hidden { overflow: hidden; } |
| </style> |
| |
| <p>This test checks that implied minimum size of grid items is only applied if overflow is visible.</p> |
| <p>The test passes if in the first grid the item overflows, in the second one it has scrollbars, |
| and in the third one the item doesn't overflow but it doesn't have scrollbars.</p> |
| |
| <div class="flex" style="align-items: start;"> |
| <div class="i1">X</div> |
| </div> |
| |
| <div class="flex"> |
| <div class="i1 auto">X</div> |
| </div> |
| |
| <div class="flex"> |
| <div class="i1 hidden">X</div> |
| </div> |
