Making div size of child content - including margins

Question

I've got a div containing configurable content (but likely paragraphs of text) and I've come across an issue animating it's height.

Here's my animation (nice and slowed down), which goes from a height 0 to it's calculated height based on it's content:

See the "hop" at the end?

After some investigation, I think I've worked out the issue. I'm animating the div that contains the html elements liket this (Angular 2, but it's not really relevant to the issue):

<div [@visibilityStateTrigger]="visibilityState" style="display: block">
    <ng-content></ng-content>
</div>

ng-content is where the children go, the visibility state is the animation triggers. The important thing is it's a div, it contains children.

My assumption (new to web development) would be that the div would size to it's children's content. And it certainly seemed to until I animated it and saw this strange step and had a look at it in the chrome inspection:

Here's the div:

<div _ngcontent-8027-15="" style="display: block; opacity: 1;">
  <p _ngcontent-8027-11="">
     Dissertation I designed an electronic tuning device for a violin including a cost estimate and full circuit diagram of all components.
  </p>        
</div>

Here's it's content:

When contracted, it simply sets the height and opacity to 0:

<div _ngcontent-8027-15="" style="display: block;height: 0px;opacity: 0;">
   <p _ngcontent-8027-11="">
      Dissertation I designed an electronic tuning device for a violin including a cost estimate and full circuit diagram of all components.
   </p>
</div>

However, it's the in-between stages where the problem is. I'm presuming due to the way it performs the animation.

I know, however, that it's not an issue if the height of the div matches the height of the content. Since I'm animating the parent div not the child components only the div's height is used in the animation.

I found an awkward solution: use padding instead of margin. However, this involves never using margin on any styles that I'm likely to ever want to put into this component - and re-styling every single html style to use padding instead of margin.

Is there a way of telling my div to size it'self based on child's full size, including margin?

Answer 1

Have you tried getting clientHeight of child onclick and apply it to the parents height?

this.on('click', function() {
    var childHeight = parentDiv.children()[0].clientHeight;

    parentDiv.style.height = childHeight + 'px';  
});

Answer 2

I found a way of doing it, but it feels a little hacky. However, it plays happy with Angular 2's reluctance to play with the DOM.

I simply add an item after the child content. The item doesn't have any margin, but so long as it's present the parent div's height accomodates it.

Like this:

I've made the item 5 by 5, and red so the behaviour can be seen:

<div [@visibilityStateTrigger]="visibilityState" style="display: block">
    <ng-content></ng-content>
    <div style="background-color: red; width: 5px; height: 5px;"></div>
</div>

But so long as it's at least 1px by 1px and thus displayed, it all works fine.