“可见性：隐藏”元素导致出现空白/滚动条

Question

我遇到一个问题，即使设置了

visibility: hidden;

，带有

max-height: 0;

的元素仍然占用空间，导致滚动条出现在右侧。

JSFiddle示例

正如您在示例中看到的，使用方便放置的按钮删除隐藏元素（减少）滚动条长度。在我的本地工作区中，这将完全删除滚动条，从而解决问题。

有没有不使用

display: none;

的解决方法？因为这会使我想保留的过渡淡出失效。谢谢！

Answer 1

尝试这个例子，我尝试使用

overflow: hidden;

来解决问题

.hidden {
  transition: visibility 0s, opacity 0.75s linear;
  max-height: 0;
  overflow: hidden;
}