Extremely simple flexbox layout, with overflow: hidden - vertical misalignment in Firefox
I'm trying to put two flex items next to each other, baseline-aligned (simple enough!), But with some slight limitations: (1) overflow: hidden
on both; (2) some padding-top
on the second flex item. Here's the HTML:
<div class="outer">
<div class="inner one">Hello</div>
<div class="inner two">Hello</div>
</div>
... and CSS:
.outer {
display: flex;
align-items: baseline;
}
.inner {
width: 30px;
overflow: hidden;
}
.one {
background: red;
}
.two {
background: yellow;
padding-top: 40px;
}
While Chrome (v43) gets the layout right (or at least what you would expect) Firefox (v38) breaks it completely: open this script in Firefox and you should see.
Any workaround for vertical alignment correctly? It's that simple, I can't believe both major browsers don't give the same result.
source to share
The workaround for this is pretty simple.
.outer {
display: flex;
align-items: flex-end;
}
Notice using flex-end for the align property, not the base one. As I understand it, the baseline is a tricky thing in flexbox. If you want to get the right results with a baseline, you might feel like your example is more typical.
About the overflow problem and why it acts like this that I'm really not sure. However, I hope you can work around this problem.
I advise you to read this great, so called "The Complete Flexbox Guide" .
Hello!
source to share