Very simple setup:
<div class="root">
<a>Foo</a>
</div>
.root {
display: flex;
}
a {
padding: 0.125rem;
}
Toggling the display: flex
style in devtools shows the content height of the <div>
alternating between 22 & 26px. I need this to not happen, and for the height to remain as it was originally.
I’ve messed around with align-items
, flex
, flex-grow
, flex-basis
, etc. but none seem to stop this bizarre resizing.
2
Answers
Hyperlinks (
a
) have adisplay
property ofinline
by default and so vertical padding does not take effect.When the parent has
display: flex
, the link is no longerinline
but is a flex child and so "blockified" and thus the vertical padding takes effect.I’d suggest making your links
display: inline-block
by default in your CSS reset or some other means, perhaps a special class for links you wish to act this way.This is very much flex inherit behaviour and the resulting size dependes on the parent height, flex is set on as you didnt set a height value on the child.
Using height: max-content; on the child will most probably result in your expected behaviour.
I’d also recommend learning more about flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/