如何仅用CSS防止居中元素超出屏幕顶部（允许底部溢出）

我的页面内容在元素增多后会超出屏幕范围，我希望内容只从底部溢出（仍可滚动访问），而不是从顶部溢出导致顶部元素无法访问，能否仅通过纯CSS实现该需求？

修改前效果：

修改后效果：

解决方案 #

核心是调整flex布局的对齐逻辑，同时给容器设置高度限制和垂直滚动，确保顶部元素始终可见，新增内容向下堆叠：

修改后的CSS代码

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden; /* 隐藏全局滚动条，让容器独立处理滚动 */
}

.centered {
  display: flex;
  align-items: flex-start; /* 内容从顶部开始排列，而非居中 */
  justify-content: flex-start;
  flex-direction: column;
  max-height: 100vh; /* 容器高度不超过视口 */
  overflow-y: auto; /* 垂直内容溢出时显示滚动条 */
  padding: 1rem; /* 避免内容贴边，优化体验 */
  box-sizing: border-box; /* 内边距计入容器高度，防止超出视口 */
}

关键修改说明

• 把原有的align-items: center和justify-content: center改为flex-start，让内容从容器顶部开始排列，不再居中
• 给.centered容器设置max-height: 100vh，限制其高度不超过当前视口高度
• 添加overflow-y: auto，当内容高度超过容器时，仅在垂直方向显示滚动条
• 给body设置overflow: hidden，避免出现全局滚动条和容器滚动条重叠的情况
• 增加内边距和box-sizing属性，优化内容的视觉间距和高度计算

完整代码示例 #

HTML

<body class="centered" id="items">
  <h1>TODO:</h1>
  <input type="text" placeholder="Enter Items Here" id="input" />
  <input type="button" onclick="add();" value="add" />
  
  <p>Paragraph.</p>
  <p>Paragraph.</p>
  <p>Paragraph.</p>
  <p>Paragraph.</p>
  <p>Paragraph.</p>
  <p>Paragraph.</p>
  <p>Paragraph.</p>
  <p>Paragraph.</p>
  <p>Paragraph.</p>
  <p>Paragraph.</p>
</body>

JavaScript

function add() {
  items = document.getElementById("items");
  input = document.getElementById("input").value;
  x = document.createElement("p");
  x.innerHTML = input;
  items.appendChild(x);
}

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