无需JavaScript实现Wrapper内Div布局：描述框溢出显示纵向滚动条

我来帮你搞定这个布局难题！你现在的核心问题是描述框无法自动占据#wrapper的剩余高度——因为#title是height:auto，没法用固定的calc值去动态计算它的实际高度。用Flexbox布局就能完美解决，全程不需要JavaScript，适配性还更强。

修改后的完整CSS代码 #

#wrapper{
  position: fixed;
  right: 0;
  width: calc(100vw - 1.51 * 95vh - 5vh);
  top: calc(40px + 2.5vh + 2.5vh);
  height: calc(100vh - 40px - 40px);
  /* 新增Flex布局核心属性 */
  display: flex;
  flex-direction: column;
}

#title{
  width: 100%;
  height: auto;
  /* 保留你原本的top属性（如果不需要可以删除，Flex布局下垂直位置会自动排列） */
  top: calc(2.5vh + 40px + 2.5vh);
}

/* 假设你的描述框是#description，根据实际类名调整 */
#description{
  /* 让描述框占据wrapper的剩余所有高度 */
  flex: 1;
  /* 内容溢出时显示纵向滚动条 */
  overflow-y: auto;
  /* 可选：添加内边距避免内容贴边，记得加盒模型属性 */
  padding: 1rem;
  box-sizing: border-box;
}

关键原理说明 #

• 给#wrapper设置display:flex和flex-direction:column后，内部的#title和#description会垂直排列，自动分配容器的空间
• #title保持height:auto，会自适应自身内容的高度，不会被压缩
• #description的flex:1表示「占据容器剩余的所有可用空间」，配合overflow-y:auto，当内容高度超过这个空间时，就会自动显示纵向滚动条

这样修改后，不管#title的内容高度怎么变化，描述框都会自动适配剩余空间，完全符合你的需求～

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