如何实现pre标签内容超出wrapper容器时可滚动查看？

DevOps 小满

2026-8-19

实现pre内容超出容器时的滚动效果

你当前代码无法触发滚动的核心原因是pre标签被设置了绝对定位，这会让它脱离正常文档流，导致wrapper容器无法感知到pre的实际高度，自然不会触发滚动行为。下面给出两种可行的解决方案：

方案一：让pre回到文档流，容器整体滚动

这种方案让pre保持在正常文档流中，当内容超出wrapper高度时，容器自动显示滚动条。修改后的CSS如下：

.wrapper {
  width: 50vw;
  height: 90vh;
  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
  background-color: salmon;
  padding: 10px; /* 可选，避免内容贴容器边缘 */
}

.wrapper pre {
  margin: 0 0 10px 0;
  padding: 10px;
  color: #ffffff;
  background-color: sandybrown;
  white-space: pre-wrap; /* 可选，让长文本自动换行，避免横向滚动 */
}

修改说明：

移除wrapper的position: relative和pre的position: absolute、bottom: 0%、display: flex，让pre回到正常文档流，确保wrapper能正确计算内容高度。
保留overflow-y: auto，当pre内容高度超过wrapper设定高度时，自动触发垂直滚动。
white-space: pre-wrap为可选属性，默认pre会保留原始换行但不自动折行长文本，添加后可避免出现横向滚动条。

方案二：pre贴容器底部，内容超出时自身滚动

如果需要pre始终固定在wrapper底部，同时内容过多时仅pre区域滚动，可通过flex布局实现：

.wrapper {
  width: 50vw;
  height: 90vh;
  background-color: salmon;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 让pre靠底部对齐 */
  padding: 10px;
}

.wrapper pre {
  margin: 0 0 10px 0;
  padding: 10px;
  color: #ffffff;
  background-color: sandybrown;
  max-height: 100%; /* 限制pre高度不超过容器 */
  overflow-y: auto; /* pre内容超出时自身滚动 */
  white-space: pre-wrap;
}