如何在html css中向父div添加滚动条？

Question

我想向父 div 添加一个垂直滚动条，因为在下面的设置中，子 div 的高度远大于父 div 的高度。我在 W3 学校读过，默认情况下overflow: auto;，如果子 div 的高度超过父 div 的高度，它将添加滚动条。但下面的设置并不能证明这一点。帮助我理解这一点。

根据 W3 学校 CSS 文档，

如果高度设置为数值（如像素、(r)em、百分比），那么如果内容不适合指定的高度，它将溢出。容器如何处理溢出的内容由溢出属性定义。

我们如何证明上述说法的合理性呢？

.parentDiv {
  background-color: coral;
  height: 50px;
  width: 200px;
}

.childDiv {
  background-color: crimson;
  height: 100px;
  width: 200px;
}

<div class="parentDiv">
  <div class="childDiv">

  </div>
</div>

@编辑：默认情况下overflow: visible;，它不是自动的。我读错了。

Answer 1

这确实有道理。您提供的 CSS 代码呈现这样的页面

这里父级和子级的宽度相同，因此您无法观察到溢出稍微更改子级的宽度，以便父级像这样可见

.parentDiv {
  background-color: coral;
  height: 50px;
  width: 200px;
}

.childDiv {
  background-color: crimson;
  height: 100px;
  width: 100px;
}

现在输出将是

正如我们所看到的，“粉色元素”是子元素，其高度属性值大于父元素的溢出。

默认情况下，溢出值为visible。所以我们可以看到元素溢出了父元素。

因为孩子已经溢出了父母。overflow我们必须在父级上定义一个属性。

正如您从 w3 链接的文档所说，如果溢出属性设置为auto，如果内容溢出，它将添加一个滚动条

这是一个代码笔，演示了相同的内容。

为了更好地理解，我改变了孩子的width和。margin

请告诉我，如果这证明了该声明的合理性