Question 329382 in CSS Question posted in
Some basic documentation can be found here.

Css – Stop `display: flex` from changing height of child

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.

Tags:

2

Answers


  1. 0

    Hyperlinks (a) have a display property of inline by default and so vertical padding does not take effect.

    When the parent has display: flex, the link is no longer inline 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.

    Login or Signup to reply.
  2. 0

    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/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search