<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <title>CSS Regions: fixed sized region inside an auto height flexbox</title> <link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" /> <style> .content { font-family: Ahem; font-size: 20px; line-height: 1em; color: green; } .region { width: 100px; height: 100px; background-color: red; } .flex { display: flex; width: 150px; background-color: gray; } </style> </head> <body> <ul> <li>Test passes if you see a green square inside a gray rectangle.</li> <li>You shouldn't see any red.</li> </ul> <div class="flex"> <div class="region"> <div class="content"> XXXXX<br /> XXXXX<br /> XXXXX<br /> XXXXX<br /> XXXXX </div> </div> </div> </body></html>