如何根据文本框内容扩展div高度或添加可用滚动条，fit-content无效怎么办

问题相关截图 #

• 实际效果截图：
• 原代码截图：

你之前滚动条不生效的核心原因是没有给div设置固定高度/最大高度限制，overflow系列属性只有在容器内容超过容器本身尺寸时才会触发对应的逻辑，没有高度限制的div会默认被内容撑开，永远不会触发滚动。

下面是两种常用的实现方案： #

方案1：添加可正常使用的滚动条 #

给目标div添加以下CSS即可：

.target-div {
  /* 二选一设置高度限制即可 */
  height: 200px; /* 固定容器高度，内容超过后直接出滚动条 */
  /* max-height: 300px; 内容少时高度自适应，超过设定值才出滚动条，更灵活 */
  
  overflow-y: auto; /* 垂直方向内容溢出时自动显示滚动条，无溢出时隐藏滚动条 */
  /* 如需要水平滚动可额外添加 overflow-x: auto; */
}

注意不要直接设置overflow: scroll，会让容器无论内容是否溢出都一直显示滚动条占位，体验较差。

方案2：实现点击展开/收起查看全部文本 #

如果不想用滚动条，也可以配合JS实现展开收起效果：

.target-div {
  max-height: 120px;
  overflow: hidden;
  transition: max-height 0.3s ease; /* 添加过渡动画更顺滑 */
}
.target-div.is-expanded {
  max-height: fit-content;
  /* 低版本浏览器不支持fit-content的话，可以设置一个足够大的固定值，比如max-height: 1000px; */
}

// 切换展开状态逻辑示例
const toggleBtn = document.querySelector('.toggle-btn')
const textContainer = document.querySelector('.target-div')

toggleBtn.addEventListener('click', () => {
  textContainer.classList.toggle('is-expanded')
  toggleBtn.innerText = textContainer.classList.contains('is-expanded') ? '收起' : '查看全部'
})

额外排查点 #

如果加了上述代码还是不生效，可以按以下顺序排查：

• 打开浏览器开发者工具的元素面板，确认你写的CSS属性没有被其他更高优先级的规则覆盖
• 确认目标div的父元素没有设置overflow: hidden裁剪掉了滚动条
• 确认div内部没有绝对定位的子元素，导致高度计算异常

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