Html 最大高度过渡仅在一个方向上工作

我正在尝试实现一个常见问题解答-因此我希望答案在单击时向下滑动。为了达到这个效果，我使用了

max height

。但不知何故，这个转变完全可以再次解决这个问题。在第一次披露时，没有转变

<div class="row mt-5">
  <div class="col-12" *ngFor="let question of questions; let i = index" (click)="selectedQuestion !== i ? selectedQuestion = i : selectedQuestion = -1">
    <div class="question-container py-4 h-100 w-100 border-bottom">
      <p class="mr-4">0{{i + 1}}</p>
      <p>{{question}}</p>
      <div class="answer-container" [class.answer-closed]="selectedQuestion !== i">
        <p>This is an answer!</p>
      </div>
    </div>
  </div>
</div>

---

A有效。

请在code fiddle沙盒中复制到目前为止您拥有的内容（HTML和CSS以及虚拟内容）（在编辑问题时按Ctrl+M打开）。此外，这不是必需的，但如果您也可以在中复制同样的内容，那就太好了。@Andrew64谢谢，我已经加入了一个有效的stackblitz。我会阅读以下内容，这可能有助于你理解为什么你的最大高度方法无法按你所希望的方式工作：请复制到目前为止你在code fiddle沙箱中拥有的内容（HTML和CSS以及虚拟内容）（在编辑问题时按Ctrl+M打开）。此外，这不是必须的，但如果你也能在中复制同样的方法，那就太好了。@AndrewL64谢谢，我已经包括了一个有效的stackblitz。我会阅读下面的内容，可能会帮助你理解为什么你的最大高度方法不能按你想要的方式工作：

  width: 100%;
  background-color: white;
  overflow: hidden;
  max-height: 500px;
  transition: max-height .5s cubic-bezier(0, 1, 0.5, 1);
}

.answer-closed {
  max-height: 0;
}