<!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 Flexbox Test: Image Expansion</title> <link href="mailto:agektmr@gmail.com" rel="author" title="Eiji Kitamura" /> <!-- You must have at least one spec link, but may have as many as are covered in the test. --> <!-- Be sure to make the main testing area first in the order --> <link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-grow" rel="help" /> <!-- The match link is only required if this is a reftest --> <link href="reference/css-flexbox-img-expand-evenly-ref.xht" rel="match" /> <meta content="" name="flags" /> <meta content="3 rectangular images fill out border." name="assert" /> <style type="text/css"> /* ADD STYLE BLOCK HERE (PREFERRABLE TO INLINE STYLES) */ div.flexbox { height: 50px; width: 300px; border: 2px dotted black; display: flex; } img { width: 48px; flex-grow: 1; background: purple; border: 1px solid white; } </style> </head> <body> <p>3 rectangular images fill out border.</p> <!-- PAGE CONTENT --> <div class="flexbox"> <img src="support/solidblue.png" /> <img src="support/solidblue.png" /> <img src="support/solidblue.png" /> </div> </body></html>