<!DOCTYPE html> <html><head> <title>CSS Flexbox Test: Items stretch correctly while content is animating</title> <link href="mailto:micky2be@gmail.com" rel="author" title="Micky Brunetti"> <link href="http://www.w3.org/TR/css-flexbox-1/#propdef-align-items" rel="help"> <link href="reference/css-flexbox-height-animation-stretch-ref.htm" rel="match"> <meta content="" name="flags"> <meta content="Items should stretch vertically in all time" name="assert"> <style> @keyframes resize { 0% {height: 100px;} 100% {height: 50px;} } .container { display: flex; width: 200px; background-color: red; } .item { background-color: green; width: 50px; } .content { height: 50px; } .bigger.content { height: 100px; animation: resize 500ms infinite alternate; } </style> </head> <body> <p>The test passes if you keep seeing a green rectangle and no red.</p> <div class="test"> <div class="container"> <div class="item"><div class="bigger content"></div></div> <div class="item"><div class="content"></div></div> <div class="item"><div class="content"></div></div> <div class="item"><div class="content"></div></div> </div> </div> </body></html>