css 在一定区域内滚动显示，不修改父级样式

当我们需要在一个固定的区域内以滚动的方式显示内容时，CSS提供了很好的解决方案。

1. 使用 `overflow` 属性

`overflow`属性可以控制当一个元素的子元素超出其高度和宽度时发生的事情。默认情况下，超出的内容会被裁剪掉，不会显示出来。然而，如果为元素设置 `overflow: auto;` 或 `overflow: scroll;` 就可以滚动显示超出的内容。

例如，下面的代码实现了一个高度为200px、宽度为300px的容器，其中包含一个高度为400px的内容块：

.container {
  height: 200px;
  width: 300px;
  overflow: auto;
}
.content {
  height: 400px;
  background: f2f2f2;
}

<div class="container">
  <div class="content"></div>
</div>

运行代码可以看到，内容块被裁剪，但通过滚动可以查看整个内容块。

2. 使用 `max-height` 属性和 `overflow` 属性

有时候我们希望显示的元素高度不固定，但是又不想修改其父元素的样式。这时候可以使用 `max-height` 属性和 `overflow` 属性实现。

例如，下面的代码实现了一个在一个固定宽度内显示高度不固定的元素：

.container {
  width: 300px;
  max-height: 200px;
  overflow: auto;
}
.content {
  height: 300px;
  background: f2f2f2;
}

<div class="container">
  <div class="content"></div>
</div>

运行代码可以看到，元素的高度超出了容器高度，但是通过滚动可以查看整个元素。

3. 让 `body` 元素滚动

有些时候，我们需要让整个页面滚动，但是又不想修改 `html` 和 `body` 的样式。这时候可以使用一个容器元素来包含整个页面内容，并让该容器元素滚动。

例如，下面的代码实现了一个高度为200px、宽度为100%的容器元素，该元素包含整个页面的所有内容：

.container {
  height: 200px;
  width: 100%;
  overflow: auto;
}
/* 重置html和body元素的样式 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
/* 让所有内容元素相对于.container元素定位 */
.container * {
  position: relative;
}

<div class="container">
  <div class="header">Header</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

运行代码可以看到，通过滚动容器元素可以查看整个页面的内容。

总结一下，以上是三种实现在固定区域内滚动显示内容的方法，不同场景可根据需要选择不同的方法。