CSS高度过渡 - chrome中的错误方向

Question

我正在使用 react 和 react-collapse 对 div 执行折叠转换。 我的用例是切换折叠的元素位于折叠元素下方。 当我切换到折叠时，仅在 Chrome 84+ 中，过渡发生在元素上方并且不会将其向下推。例如，在 Firefox 中，它确实如此 - 这是我想要的行为。

复制代码框：https://codesandbox.io/s/angry-elion-dxi75?file=/src/App.js 在 chrome 84+ 中打开它会重现该错误。 在 Safari/Firefox/Chrome 83 中打开它会呈现所需的行为。

我的假设是，chrome 在最新版本中执行此转换的方式发生了一些变化，并且它不允许切换元素从可见 DOM 中消失。 我对么？ 有没有办法让我得到我想要的行为？

非常感谢，感谢您的帮助！

萨尔

Answer 1

解决方法是在任何容器上面添加这些元素：

  overflow-anchor: none;