grid-baseline-003-ref.html (1223B)
1 <!DOCTYPE html> 2 <style> 3 .flexbox { 4 display: flex; 5 } 6 .inline-flexbox { 7 display: inline-flex; 8 } 9 .flex-one { 10 flex: 1; 11 } 12 .inline-block { display: inline-block; } 13 .flexbox, .inline-flexbox { background-color: lightgrey; } 14 .border { border: 11px solid pink; } 15 .padding { padding: 13px; } 16 .margin { margin: 8px 0; } 17 .flexbox > div { 18 min-width: 0; 19 min-height: 0; 20 } 21 </style> 22 23 <div> 24 Should align with the bottom 25 <div class="inline-block border margin padding" style="background-color: pink"> 26 <div class="flexbox border margin padding" style="width: 100px; height: 100px; background-color: pink"> 27 <div style="width: 200px; overflow: scroll; background-color: lightgrey; margin: 10px 0px; border-top: 10px solid pink;"></div> 28 </div> 29 </div> 30 of the horizontal scrollbar. 31 </div> 32 33 <div> 34 Should align 10px below the 35 <div class="inline-block" style="background-color: pink"> 36 <div class="flexbox" style="width: 100px; height: 100px; background-color: pink"> 37 <div style="width: 200px; overflow: scroll; background-color: lightgrey; padding-bottom: 10px; margin: 10px 0px; border-top: 10px solid pink; border-bottom: 10px solid pink;"></div> 38 </div> 39 </div> 40 horizontal scrollbar, if one is visible. 41 </div>