解决嵌套可折叠元素内容无法正确撑开父级容器的问题

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"; // 展开
    }
  });
}

// 1. 预计算所有可折叠容器的scrollHeight总和
var allHeights = 0;
var contents = document.getElementsByClassName("collapsible-container");
var j;

for (j = 0; j < contents.length; j++) {
  // 注意：这里获取的是每个容器在完全展开（无max-height限制）时的scrollHeight
  // 此时其内部的嵌套内容即使是折叠的，其scrollHeight也会被计算进去，
  // 但为了确保所有容器都能容纳所有内容，我们将其累加作为一个足够大的上限。
  allHeights += contents[j].scrollHeight;
}

// 2. 绑定点击事件，使用预计算的总高度
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; // 获取紧随其后的内容容器

    // 判断当前容器是否已展开
    // 如果maxHeight等于allHeights，则表示已展开，点击后应收起
    if (content.style.maxHeight === allHeights + "px") {
      content.style.maxHeight = "0px"; // 收起
    } else {
      // 否则，将其展开到预计算的最大高度
      content.style.maxHeight = allHeights + "px"; // 展开
    }
  });
}

.app {
  display: flex;
  min-height: 100vh;
}

.content {
  flex-grow: 1;
  padding: 50px 0 50px 75px;
}

.collapsible-content {
  padding: 20px 28px;
  /* transition 确保展开/收起动画平滑 */
  transition: max-height 0.2s ease-out; 
  background-color: none; /* 示例，可根据需要调整 */
  float: none; /* 示例，可根据需要调整 */
}

.collapsible-container {
  max-height: 0; /* 初始状态下内容隐藏 */
  width: 75%; /* 示例宽度 */
  overflow: hidden; /* 隐藏超出max-height的内容 */
  padding: none; /* 示例，可根据需要调整 */
  transition: max-height 0.2s ease-out; /* 动画效果 */
  background-color: none; /* 示例，可根据需要调整 */
  float: none; /* 示例，可根据需要调整 */
}

.collapsible {
  background-color: rgb(218, 228, 238);
  color: rgb(84, 84, 84);
  cursor: pointer;
  padding: 18px;
  width: 75%;
  text-align: left;
  text-indent: 20px;
  letter-spacing: 1px;
  outline: none;
  font-size: 18px;
  border: 1px solid white;
  float: top; /* 示例，可根据需要调整 */
}

.active,
.collapsible:hover {
  background-color: rgb(175, 186, 197);
  color: white;
}

.collapsible:after {
  content: '\002B'; /* 'plus' symbol (+) */
  color: rgb(74, 74, 74);
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212"; /* 'minus' symbol (-) */
}

<div class="app">
  <main class="content">

    <h1>Main Title</h1>
    <button class="collapsible">Header 1</button>
    <div class="collapsible-container">
      <img src="" alt="Image 1" style="width:200px;height:200px;">
    </div>

    <button class="collapsible">Header 2</button>
    <div class="collapsible-container">
      <div class="collapsible-content"> Main content will be written here
      </div>

      <!-- 嵌套的可折叠组件 -->
      <button class="collapsible">sub header</button>
      <div class="collapsible-container">
        <img src="." alt="Image 2" style="width:200px;height:200px;">
      </div>
    </div>

    <button class="collapsible">Header 3</button>
    <div class="collapsible-container">
      <img src="" alt="Image 1" style="width:200px;height:200px;">
    </div>
  </main>
</div>