1128354-1-ref.html (1253B)
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 /* In this reference case, we make the inner elements be auto-height 18 * and aligned to the main-axis start side ("align-self:flex-start"). 19 * That's how the corresponding piece of the testcase should render, 20 * given its "height: [unresolvable percent]" and implicit 21 * "align-self: stretch". */ 22 align-self: flex-start; 23 background: pink; 24 } 25 .height50pct { 26 align-self: flex-start; 27 background: brown; 28 } 29 .height0pct { 30 align-self: flex-start; 31 background: yellow; 32 } 33 .spacer { 34 background: lightblue; 35 height: 200px; 36 width: 50px; 37 } 38 </style> 39 </head> 40 <body> 41 <div class="flexVert"> 42 <div class="flexIntermediateHoriz"> 43 <div class="flexInnerHoriz">text</div> 44 <div class="height50pct">fifty</div> 45 <div class="height0pct">zero</div> 46 <div class="spacer"></div> 47 </div> 48 </div> 49 </body> 50 </html>