flexbox_fbfc.html (616B)
1 <!DOCTYPE html> 2 <title>flexbox | flex formatting context :: float intrusion</title> 3 <link rel="author" href="http://opera.com" title="Opera Software"> 4 <link rel="help" 5 href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> 6 <link rel="match" href="flexbox_fbfc-ref.html"> 7 <style> 8 * {margin: 0;} 9 body {width: 600px;} 10 #float { 11 background: #3366cc; 12 width: 25%; 13 float: left; 14 } 15 #flex { 16 background: #ffcc00; 17 width: 80%; 18 display: flex; 19 } 20 div div { 21 background: pink; 22 margin: 2em; 23 height: 4em; 24 } 25 </style> 26 27 <div id="float">filler</div> 28 29 <div id="flex"> 30 <div>Yellow box should be below the blue box</div> 31 </div>