Div overflow hidden basics

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
   #div1 {   width:500px;height:200px;display:inline-block;
             border:1px solid;  }
   #div2 {   width:500px;height:200px;display:inline-block;
             border:1px solid;overflow:hidden;  }
</style>
</head>
<body>

<div id='div1'>oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</div>
<p>
<div id='div2'>oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</div>

<script>

</script>
</body>
</html>