如果您的内容元素具有position: absolute，则不可能执行此操作。但是，有时您可以使用浮动元素来避免绝对定位，并获得所需的结果。有关示例，请参见**this answerto avery similar question**。

尝试参考这个JSfiddle我做的。http://jsfiddle.net/gA7mB/如果我读对了，这基本上是你正在寻找的。
超文本标记语言

<div class="container" >
<div class="relative" >
    <div class="absolute" >

        <h1>I am Content i can be as long as you wish. t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</h1>

    </div>
</div>

中央支助系统

.container{
    width: 500px;            
}

.relative{
    position: relative;
    background: #666;
    min-width: 200px;
    min-height: 200px;
}

.absolute{
    position: absolute;
    background: #999;
    top: 20px;  /* not important, just to show absolute position */
    left: 20px; /* not important, just to show absolute position */ 
}

诀窍是将绝对div设置为全宽和全高：

position: absolute;
bottom: 0;
left: 0;
transform: translateY(100%);
width: 100vw;
height: 100vh;

(You可以减小宽度和高度，以防止元素溢出页面。）
然后你可以把一个孩子的div放到绝对位置的div中，它会根据需要增长。
要防止子div适合父div，可以将此添加到绝对定位的div：

display: flex;
align-items: flex-start;

然后孩子们将最小化它的宽度，同时仍然能够增长。

另一种方法是使用Grid代替position：“绝对的”。
这将确保容器适合你想要放置内容的区域。

.container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

稍后你将内容分配到区域中，如果你使用相对位置，你仍然可以使用top，left，right，bottom属性;它们将绝对地对容器起作用，并且容器将适合内容物;

.child {
    grid-column: 1;
    grid-row: 1;

    position: relative;
    top: 20px;
}