Q:

Collapsible div block nested within another to re-adjust the max height of the whole block

It was hard to explain the issue of the question in one line but to summarize: 
I have collapsible div elements highlighted by a .collapsible class, and within we have a .content class. If the parent element is without the .active class the max height is set to null, but when active it is calculated with max height and then set as a style. 
The JavaScript that runs it all:
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.maxHeight){
            content.style.maxHeight = null;
        } else {
            content.style.maxHeight = content.scrollHeight + "px";
        } 
    });
}

Fairly straight forward, got it from w3school. I've adjusted it a bit more and manipulated to better suit my functionality. 
I tried to nest these collapsible and that's when things got strange, the child of the collapsible does calculate its correct max height and push the other content down. 
Here is a JavaScript snippet of the bug in action:

 var coll = document.getElementsByClassName("collapsible");
 var i;
 for (i = 0; i < coll.length; i++) {
  if (coll[i].classList.contains('active')) {
   var content_tmp = coll[i].nextElementSibling;
   if (content_tmp.style.maxHeight){
    content_tmp.style.maxHeight = null;
   } else {
    content_tmp.style.maxHeight = content_tmp.scrollHeight + "px";
   } 
  }
  coll[i].addEventListener("click", function() {
   this.classList.toggle("active");
   var content = this.nextElementSibling;
   if (content.style.maxHeight){
    content.style.maxHeight = null;
   } else {
    content.style.maxHeight = content.scrollHeight + "px";
   } 
  });
 }
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
.active, .collapsible:hover {
  background-color: #ccc;
}

.content {
  max-height: 0;
  transition: max-height 0.2s ease-out;
  padding: 0 18px;
  overflow: hidden;
  background-color: #f1f1f1;
}
<button class="collapsible"><span>Main Parent</span></button>
<div class="content">
  <button class="collapsible"><span>Child 1</span>       </button>
  <div class="content">
    <p>
      Some Text of child 1 that is very long and needs to be pushed down.Some Text of child 1 that is very long and needs to be pushed down.Some Text of child 1 that is very long and needs to be pushed down.Some Text of child 1 that is very long and needs to
      be pushed down.Some Text of child 1 that is very long and needs to be pushed down.Some Text of child 1 that is very long and needs to be pushed down.Some Text of child 1 that is very long and needs to be pushed down.
    </p>
  </div>
  <button class="collapsible"><span>Child 2</span></button>
  <div class="content">
    <p>
      Some Text of child 2 that is very long and needs to be pushed down.<br><br><br>Some Text of child 2 that is very long and needs to be pushed down.
    </p>
  </div>
</div>

A:

You should check for parent collapsible elements on each click and adjust their max-height values. Another thing to keep in mind... once we start the transition, than we have to delay the max-height calculation. Would be easier with jQuery, but here is a plain JS solution:

var coll = document.getElementsByClassName("collapsible");
var animationDelay = 200; /* Gotta delay max-height value */
function calcMaxHeight(elem) {
    var content = elem.nextElementSibling;
    if (elem.classList.contains("active")) {
        content.style.maxHeight = content.scrollHeight + "px";
    } else {
        content.style.maxHeight = "0";
    };
    var nextParentContent = elem.closest(".content");
    if (nextParentContent !== null) {
        var nextParentCollapsible = nextParentContent.previousElementSibling;
        setTimeout(function() {
            calcMaxHeight(nextParentCollapsible);
        }, animationDelay);
    };
};
for (let i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        calcMaxHeight(this);
    });
}
.collapsible {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}

.active,
.collapsible:hover {
    background-color: #ccc;
}

.content {
    max-height: 0;
    transition: max-height 0.2s ease-out;
    padding: 0 18px;
    overflow: hidden;
    background-color: #f1f1f1;
}
<button class="collapsible"><span>Main Parent</span></button>
<div class="content">
    <button class="collapsible"><span>Child 1</span> </button>
    <div class="content">
        <p>
            Some Text of child 1 that is very long and needs to be pushed down.Some Text of child 1 that is very long and needs to be pushed down.Some Text of child 1 that is very long and needs to be pushed down.Some Text of child 1 that is very long and needs to
            be pushed down.Some Text of child 1 that is very long and needs to be pushed down.Some Text of child 1 that is very long and needs to be pushed down.Some Text of child 1 that is very long and needs to be pushed down.
        </p>
    </div>
    <button class="collapsible"><span>Child 2</span></button>
    <div class="content">
        <p>
            Some Text of child 2 that is very long and needs to be pushed down.<br><br><br>Some Text of child 2 that is very long and needs to be pushed down.
        </p>
    </div>
</div>

Also on JSFiddle
You could probably improve this script, just wanted to show you a jQuery solution:

$('.collapsible').on('click', function(e) {
 var thisCollapsible = $(this);
 var thisContent = thisCollapsible.next();
 thisCollapsible.toggleClass('active');
 if( thisCollapsible.hasClass('active') ) {
  thisContent.slideDown(200);
 } else {
  thisContent.slideUp(200);
 };
});
.collapsible {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}

.active,
.collapsible:hover {
    background-color: #ccc;
}

.content {
    display: none;
    padding: 0 18px;
    overflow: hidden;
    background-color: #f1f1f1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="collapsible"><span>Main Parent</span></button>
<div class="content">
    <button class="collapsible"><span>Child 1</span> </button>
    <div class="content">
        <p>
            Some Text of child 1 that is very long and needs to be pushed down.Some Text of child 1 that is very long and needs to be pushed down.Some Text of child 1 that is very long and needs to be pushed down.Some Text of child 1 that is very long and needs to
            be pushed down.Some Text of child 1 that is very long and needs to be pushed down.Some Text of child 1 that is very long and needs to be pushed down.Some Text of child 1 that is very long and needs to be pushed down.
        </p>
    </div>
    <button class="collapsible"><span>Child 2</span></button>
    <div class="content">
        <p>
            Some Text of child 2 that is very long and needs to be pushed down.<br><br><br>Some Text of child 2 that is very long and needs to be pushed down.
        </p>
    </div>
</div>

Also on Playground here

