HTML页面article元素设置垂直滚动效果失效问题求助

overflow-y: scroll 要触发滚动效果的前提是容器有明确的高度限制，你当前没有给article元素设置固定高度或者最大高度，容器会默认被内部内容撑开高度，自然不会出现滚动条。

另外你的border属性设置不完整，仅写了0.5em缺少边框样式，实际不会渲染边框。

修改article对应的CSS规则，添加高度限制即可，示例如下：

/*Especificidad 003*/
body section article {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  grid-column-start: 1;
  grid-column-end: 6;
  overflow-y: scroll;
  /* 新增高度限制：如果要固定高度就用height，要自适应上限就用max-height */
  max-height: 300px;
  padding: 5%;
  margin: 5%;
  background-color: white;
  /* 补全border属性 */
  border: 0.5em solid #ccc;
}

• 如果希望article高度不超过指定值、内容少时自动收缩，用max-height即可
• 如果希望无论内容多少，article都保持固定高度，把max-height换成height即可

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