align-items-baseline-overflow-non-visible.html (1066B)
1 <!DOCTYPE html> 2 <title>A block with 'overflow: hidden' should produce normal baseline</title> 3 <link rel="author" title="Koji Ishii" href="kojii@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-baselines"> 5 <link rel="match" href="reference/align-items-baseline-overflow-non-visible-ref.html"> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 7 <style> 8 .flex { 9 display: flex; 10 align-items: baseline; 11 font: 25px/1 Ahem; 12 } 13 .overflow { 14 overflow: hidden; 15 height: 2em; 16 } 17 </style> 18 19 <body> 20 <!-- 21 CSS2 states that: 22 The baseline of an 'inline-block' is the baseline of its last line box in 23 the normal flow, unless it has either no in-flow line boxes or if its 24 'overflow' property has a computed value other than 'visible', in which case 25 the baseline is the bottom margin edge. 26 https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align 27 This rule should apply only to 'inline-block', and not to normal block. 28 --> 29 <div class="flex"> 30 <span>XX</span> 31 <div><div class="overflow">YY</div></div> 32 </div> 33 </body>