In Google Chrome v84, there seems to be an issue with line-height and display: flex (Chrome v83 and FireFox are not affected). The height of the element is not always enforced properly.
<div class="outer-wrapper">
<div class="wrapper">
<div class="inner">
This text should display outside the wrapper box
</div>
</div>
</div>
.outer-wrapper {
display: flex;
}
.wrapper {
line-height: 100px;
}
.inner {
position: relative;
top: 100%; // this seems ignored in Chrome v84 (perhaps .wrapper's height is 0)
}
To see this issue in action, visit this Codepen link: https://codepen.io/damhonglinh/full/BajMBNM