<!DOCTYPE html> | |
<style> | |
.wrapper { | |
width: 200px; | |
border: 5px solid; | |
} | |
.wrapper > div { | |
height: 100px; | |
} | |
.magenta { | |
background: magenta; | |
} | |
.cyan { | |
background: cyan; | |
} | |
</style> | |
<p>This test checks that percentage rows are properly resolved for a grid container that is a flex item with a definite height.</p> | |
<p>Test passes if you see a 200x200 box with top half cyan and bottom half magenta.</p> | |
<div class="wrapper"> | |
<div class="cyan"></div> | |
<div class="magenta"></div> | |
</div> |