html - 自动包含设置了上/左/右/下值的相对定位元素

Question

我希望父容器 .wrapper1(绿色边框)自动包含 .wrapper2(蓝色边框)，没有 javascript 是否可行？

.wrapper2 可以包含在 .wrapper1 中(假定 top 未设置)。 然而，如果 top:100px，.wrapper2 现在在 .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>  

谢谢。

Answer 1

您可以使用 overflow用于剪辑内容或显示 block 级元素溢出内容的 CSS 属性。

例如，尝试将 overflow: auto; 添加到 .wrapper1。

JSFiddle