父元素固定尺寸时子元素overflow:auto失效问题求助

嘿，这个问题我太熟了！你之所以没看到预期的滚动效果，核心原因是**overflow:auto只有在元素有明确的高度/最大高度限制时才会生效**。你只给父元素设了高度，但第二个子元素没有任何高度约束，它会跟着里面的长文本一起无限撑开，自然不会触发滚动。

下面给你两种靠谱的解决方案，按需选择：

方案一：用Flex布局（推荐，适配动态内容） #

这是最灵活的方式，不需要手动计算高度，让浏览器自动分配空间：

.parent {
  height: 200px;
  width: 100px;
  background-color: #F00;
  padding: 10px;
  box-sizing: border-box; /* 把padding算进height里，避免父元素超出预期尺寸 */
  display: flex;
  flex-direction: column; /* 让子元素垂直排列 */
  gap: 10px; /* 可以用来替代hr的间距，或者保留hr也没问题 */
}
.second-child {
  overflow: auto;
  flex: 1; /* 关键：让这个子元素占据父容器的剩余所有空间 */
}

对应的HTML保留原结构即可：

<div class="parent">
  <div class="first-child"> Some content </div>
  <hr />
  <div class="second-child"> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div>
</div>

设置后，第一个子元素和hr会占据自身高度，剩余空间全分配给第二个子元素，当文本超出空间时，滚动条会自动出现。

方案二：用calc手动计算高度（适合固定高度场景） #

如果第一个子元素高度固定，你也可以用calc直接算出第二个子元素的高度：

.parent {
  height: 200px;
  width: 100px;
  background-color: #F00;
  padding: 10px;
  box-sizing: border-box;
}
.first-child {
  height: 30px; /* 假设第一个子元素高度固定 */
}
.second-child {
  overflow: auto;
  /* 父元素内容高度为200px（因box-sizing），减去first-child的30px，再减去hr的默认高度（约16px） */
  height: calc(100% - 30px - 16px);
}

这种方式需要明确知道其他元素的高度，灵活性不如Flex，但在简单场景下也能满足需求。

最后提醒：一定要加box-sizing: border-box，否则父元素的实际高度会变成height + padding，超出你预期的200px尺寸。

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