CSS - 将父级的高度设置为0，但子级div仍然显示

Question

我想创建一个简单的动画来显示和隐藏组件。

#parent {
  height: 0px;
}

<div id="parent">
  <div id="child">This is some content</div>
</div>

当我将父div高度设置为0时，我希望子div也不可见，但是孩子仍然显示。当父高度设置为0时，我想让它消失。

这里有什么问题，我做错了什么？ 非常感谢你。

Answer 1

将溢出隐藏属性添加到父对象。这样会溢出溢出，其余内容将不可见（在主题情况下，高度为0，因此剩余也将为0）。

#parent {
  height: 0px;
  overflow: hidden;
}

Answer 2

添加 overflow: hidden 后，子DOM中写的任何内容都会消失

#parent {
  height: 0px;
  overflow: hidden;
}

<div id="parent">
  <div id="child">
    This is some content..
    This is some content..
    This is some content..
  </div>
</div>