如何让.container在:hover显示span内容时自动调整高度？

看起来你遇到的核心问题是：当hover显示span内容时，span脱离了文档流，导致.container无法感知到它的高度，所以内容溢出，甚至在两个输入框之间悬停时出现异常。别担心，咱们来一步步解决这个问题。

问题根源 #

如果你的span是用position:absolute或者display:none来控制隐藏/显示的，那前者会让span脱离文档流（container不会计算它的高度），后者会直接让元素从文档流中消失，hover显示时container来不及自适应高度，就会出现溢出或者跳动的问题。

解决方案：让span留在文档流中，用max-height控制显示隐藏 #

我们可以用max-height和overflow:hidden来实现span的平滑显示/隐藏，同时让span始终处于文档流内，这样container就能自动调整高度来匹配内容了。

完整代码示例

先假设你的HTML结构大概是这样的：

<div class="container">
  <div class="text">输入框1</div>
  <div class="share">
    <span class="tooltip">这里是悬停时要显示的长文本，比如：这是一段很长很长的提示内容，测试一下容器会不会自动调整高度来容纳它，再也不会溢出啦！</span>
  </div>
  <div class="text">输入框2</div>
</div>

然后修改你的CSS：

.share {
  flex: 1;
  border: 2px solid silver;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 不要给share设置固定高度！让它自适应内部内容 */
}

/* 默认隐藏span：max-height设为0，overflow隐藏内容 */
.share .tooltip {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease; /* 加上过渡动画更丝滑 */
  /* 可以加一些美化样式 */
  background-color: #f0f0f0;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #ddd;
  margin-top: 8px; /* 让tooltip和share主体拉开点距离 */
}

/* hover时展开span：设置一个足够大的max-height，确保能容纳所有内容 */
.share:hover .tooltip {
  max-height: 1000px; /* 这个值只要比你span可能的最大高度大就行 */
}

.container {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  border: 2px solid #333;
  padding: 16px;
  width: 300px;
  /* 绝对不要设置固定高度！让container的高度由内部内容自动决定 */
}

.text {
  margin: 8px 0;
  padding: 8px;
  border: 1px solid #ccc;
}

为什么这样有效？ #

• span始终在文档流中：用max-height控制显示，而不是脱离文档流的定位，container会自动计算span的高度，当hover展开时，container的高度会跟着自适应，不会出现内容溢出。
• 平滑过渡：加上transition属性，显示隐藏的过程会更自然，不会突然跳动。
• 避免固定高度：不管是.container还是.share，都不要设置固定高度，让它们完全由内部内容撑起，这是自适应高度的关键。

如果之前你给span用了position:absolute，那一定要去掉这个属性，让它回到文档流里。如果需要tooltip显示在特定位置（比如share的上方/下方），可以用flex的flex-direction调整，或者用margin来定位，只要不脱离文档流就行。

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