| <!DOCTYPE html> |
| <title>A block with 'overflow: hidden' should produce normal baseline</title> |
| <link rel="author" title="Koji Ishii" href="kojii@chromium.org"> |
| <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-baselines"> |
| <link rel="match" href="reference/align-items-baseline-overflow-non-visible-ref.html"> |
| <style> |
| .flex { |
| display: flex; |
| align-items: baseline; |
| } |
| .overflow { |
| overflow: hidden; |
| height: 2em; |
| } |
| </style> |
| |
| <body> |
| <!-- |
| CSS2 states that: |
| The baseline of an 'inline-block' is the baseline of its last line box in |
| the normal flow, unless it has either no in-flow line boxes or if its |
| 'overflow' property has a computed value other than 'visible', in which case |
| the baseline is the bottom margin edge. |
| https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align |
| This rule should apply only to 'inline-block', and not to normal block. |
| --> |
| <div class="flex"> |
| <span>XX</span> |
| <div><div class="overflow">YY</div></div> |
| </div> |
| </body> |
