I want the parent container .wrapper1 (green border) to automatically contain .wrapper2 (blue border), is is possible without javascript?

.wrapper2 can be contained in .wrapper1 (given top is not set). 
However if top:100px, .wrapper2 now is outside .wrapper1

```
.wrapper1 { 
border:3px solid green;
width:300px;
}

.wrapper2 { 
position: relative; 
width:100px;
top:100px;
margin:0 auto;
border:3px dashed blue;
}    

<div class="wrapper1">
<p class="wrapper2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, quia, quod, quae nisi beatae vel id fugiat cupiditate voluptas aperiam aspernatur est hic debitis a corrupti laudantium ipsa iure deleniti.</p>
</div>  

```

Thanks.