<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: #BBFFAA;
/*
子元素默认存在于父元素内容区内
理论上子元素最大可以等于父元素内容区大小
如果子元素的大小超过了父元素怒的内容区，则超过的大小
会在父元素以外的位置显示
超出父元素内容区的内容称之为溢出
父元素默认将溢出内容在父元素外显示
通过overflow可以设置父元素如何处理溢出内容
可选值：
visible 默认值 不会对溢出内容做处理
hidden 溢出的内容，会被修剪，不会显示
scroll 为父元素添加滚动条，拖动滚动条查看完整内容
auto 会根据需求自动添加滚动条、
需要水平添加水平，需要垂直添加垂直
都不需要都不添加
*/
overflow: auto;
}
.box2{
width: 100px;
height: 500px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="box2"></div>
</div>
</body>
</html>
overflow 可选值
visible 默认值不会对溢出内容处理
hidden 溢出内容会被修剪不会显示
scroll 为父元素添加滚动条拖动滚动条查看完整内容
auto 根据需求自动添加滚动条