如何让红色div内文本随div展开时完整显示？

问题出在样式冲突与文本溢出处理上，以下是修复后的代码：

.box {
  transform: translateY(-20px);
  background: #9b59b6;
  width: 500px;
  text-align: center;
  color: white;
  font-size: 20px;
}

.key {
  height: 50px;
  width: 600px;
  background: red;
  transition: height 2s;
  overflow: hidden;
  line-height: 50px; /* 初始状态让文本垂直居中 */
}

.key:hover {
  height: 500px;
  line-height: 1.5; /* 展开后用正常行高适配多行文本 */
}

<div class="box key">
  <h1 id="super">Trying to put it here</h1>
  <p>这里可以添加更多文本，hover时会全部显示出来</p>
  <p>这是第二行额外测试文本</p>
</div>

关键改动说明 #

• 移除冲突样式：删掉.box中的height:200px，避免和.key的高度设置冲突，让.key完全控制盒子高度。
• 添加溢出隐藏：给.key加上overflow: hidden，初始高度较小时，超出盒子的文本会被隐藏，hover展开后自动显示全部内容。
• 调整行高适配：初始状态line-height和高度一致（50px），保证文本垂直居中；hover后改为line-height:1.5，适配多行文本的正常排版。
• 简化过渡属性：只保留height的过渡，匹配你需要的垂直展开效果，不需要宽度变化的话可以去掉width过渡。

如果需要优化内部文本间距，还可以给内部元素添加margin调整：

.key h1, .key p {
  margin: 10px 0;
}

内容的提问来源于stack exchange，提问作者user24650971