在嵌套的flexbox列中滚动内容(具有动态高度)

<div class="parent-container">
  <div class="scroll-container">
    <div class="child-container">
      <!-- 添加需要滚动的内容 -->
    </div>
  </div>
</div>

.parent-container {
  display: flex;
  flex-direction: column;
}

.scroll-container {
  overflow: auto;
}

.child-container {
  display: flex;
  flex-direction: column;
}

const scrollContainer = document.querySelector('.scroll-container');
const childContainer = document.querySelector('.child-container');

// 监听内容变化并调整滚动容器高度
const observer = new MutationObserver(() => {
  scrollContainer.style.height = `${childContainer.offsetHeight}px`;
});

observer.observe(childContainer, { childList: true, subtree: true });