1128354-1.html (1359B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 .flexVert { 7 display: flex; 8 flex-direction: column; 9 } 10 11 .flexIntermediateHoriz { 12 display: flex; 13 } 14 15 .flexInnerHoriz { 16 display: flex; 17 /* This percent should not be resolvable, because our parent's 18 * height is indefinite (because our parent is a flex item with an 19 * indefinite flex basis, in an indefinite-main-sized flex container). 20 * So we just end up with our content height. 21 */ 22 height: 100%; 23 background: pink; 24 } 25 .height50pct { 26 /* This percent should not be resolvable, for the same reason as above. 27 */ 28 height: 50%; 29 background: brown; 30 } 31 .height0pct { 32 /* This percent should not be resolvable, for the same reason as above. 33 */ 34 height: 0%; 35 background: yellow; 36 } 37 .spacer { 38 background: lightblue; 39 height: 200px; 40 width: 50px; 41 } 42 </style> 43 </head> 44 <body> 45 <div class="flexVert"> 46 <div class="flexIntermediateHoriz"> 47 <div class="flexInnerHoriz">text</div> 48 <div class="height50pct">fifty</div> 49 <div class="height0pct">zero</div> 50 <div class="spacer"></div> 51 </div> 52 </div> 53 </body> 54 </html>