flex-fragmented-with-float-descendant-001-ref.html (1140B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Reference Case</title> 6 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 7 <style> 8 .multicol { 9 width: 300px; 10 columns: 100px auto; 11 max-height: 160px; 12 border: 3px solid pink; 13 } 14 .container { 15 display: flex; 16 } 17 .weird-flex-item { 18 border: 4px solid teal; 19 outline: 4px solid blue; 20 } 21 .tallFloat { 22 float: left; 23 border: 3px solid black; 24 height: 500px; 25 width: 100px; 26 background: yellow; 27 } 28 .float { 29 /* In this reference case, this is not actually a float. */ 30 background: cyan; 31 width: 100px; 32 } 33 .inside-float { 34 height: 30px; 35 width: 30px; 36 background: purple; 37 display: inline-block; 38 } 39 </style> 40 </head> 41 <body> 42 <div class="multicol"> 43 <div class="container"> 44 <div class="weird-flex-item"> 45 <div class="tallFloat"></div> 46 <br> 47 <div class="float"> 48 <div class="inside-float"> 49 </div> 50 </div> 51 </div> 52 </div> 53 </div> 54 </body> 55 </html>