0

EDIT:

Per the comments, it was unexpected that the <div> was ever centering - turned out to be a height thing, where the <div> was taking up the parent's full height, but the custom element's children were not.

Also this isn't a duplicate but whatever

I have the following css:

.layout-main {
  display: flex
  flex-direction: column;
}

If I do the following:

<div class="layout-main">
  <div> stuff goes here </div>
</div>

,

the "stuff" is centered vertically.

However, if I define a custom element, which results in:

<div class="layout-main">
  <my-element>
    <div> stuff goes here </div>
  </my-element>
</div>

the "stuff" is not centered vertically.

If I explicitly set justify-content: center on .layout-main, problem solved.

If I set display: contents on my-element, problem also solved.

Saw this that seemed related / docs on contents

Why is the custom element not centered vertically the way a div is when inside a display: flex; justify-content: center parent?

Aaron Parisi
  • 464
  • 7
  • 15
  • 2
    There's no reason for the `div` in your first example to be centered vertically. The rest of your post makes sense. The original `div` should not be centered vertically, based on the code you're providing here. – Michael Benjamin Feb 07 '23 at 19:14
  • @MichaelBenjamin that's interesting... let me take another look at my code – Aaron Parisi Feb 07 '23 at 19:19

1 Answers1

1

The display: flex property will only change the positioning of its children, not its children's children. It would be best if you moved the class="layout-main" part onto the my-element block and then set it's height to be 100% of it's parent div's height.

Eroxl
  • 48
  • 5