<!DOCTYPE html> <html><head><title>flexbox | flex: larger integer</title> <link href="http://opera.com" rel="author" title="Opera Software"> <link href="http://www.w3.org/TR/css-flexbox-1/#flex-common" rel="help"> <link href="reference/flexbox_flex-natural-ref.htm" rel="match"> <style> div { background: blue; margin: 1em 0; border: 1px solid black; height: 8em; width: 800px; display: flex; } span { background: white; margin: 1em 0; width: 5em; display: inline-block; flex: 2; } #flex span { flex: 666 1 0%; } span:nth-child(1) {background: yellow;} span:nth-child(2) {background: pink;} span:nth-child(3) {background: lightblue;} span:nth-child(4) {background: grey;} </style> </head><body><div> <span>one</span> <span>two</span> <span>three</span> <span>four</span> </div> <div id="flex"> <span>one</span> <span>two</span> <span>three</span> <span>four</span> </div> </body></html>