CSS + JS：“手风琴”标签将其他标签移出屏幕

Question

预期的行为：加载页面时，手风琴中的“初始”选项卡处于打开状态。其他手风琴选项卡位于屏幕底部，并在关闭部分时向上滑动。

如果手风琴节的长度大于屏幕，则该区域是可滚动的，但选项卡仍位于屏幕底部。

问题：目前，我的手风琴将所有元素向下推。我认为是由于我无法正确使用position + overflow而引起的。任何帮助将不胜感激。

手风琴CSS：

.accordion {
  align-items: flex-start;
  align-content: flex-start;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  box-sizing: border-box;
  display: flex;
  flex-flow: row wrap;
  height: calc(100vh - 68px);
  position: relative;
  right: 0;
  top: 0;

  &__panel {
    border-bottom: 1px solid black;
    flex: 1 100%;
    flex-direction: column;
    position: relative;
    overflow: hidden;

    &__header {
      font-size: 1.25em;
      line-height: 2em;
      padding: 5px;
      text-align: left;

      span {
        float: right;
        padding: 0 1em 0 0;

        img {
          width: 17px;
        }
      }
    }

    &__body {
    }
  }

  .active {
    background: black;
    color: lightgray;
  }

  .hide {
    display: none;
  }
}

HTML布局：

<div class="accordion">
  <div class="accordion__panel">
    <div class="accordion__panel__header">SOME HEADER<span><img src="static/svg/caret.svg"></span></div>
    <div class="accordion__panel__body hide">
      SOME CONTENT GOES HERE.
    </div>
  </div>
</div>

在这种情况下，我认为我的JS不相关，但是如果需要，也可以发布。

JS从主体中删除类hide。在实现动画之前，这是暂时的。