html - 子div增长时容器div不增长？

Question

当内容大小发生变化时，如何让容器适应内容的大小？请注意，当添加更多内容时，背景填充不会扩展。

var text = document.getElementById("content");
text.innerText = document.body.innerText + document.body.innerText + document.body.innerText;;

* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		border: none;
	}
	#view1 {
		position: absolute;
		background: #E5E5E5;
		width: 671px;
		height: 272px;
		background-color: rgba(232,232,232,1);
		overflow: visible;
	}
	#FlexGroup {
		position: absolute;
		width: 589px;
		left: 41px;
		top: 88px;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: space-between;
		flex-wrap: nowrap;
		overflow: visible;
		gap:  30px;
	}
	#content {
		position: relative;
		align-self: auto;
		overflow: visible;
		width: 590px;
		text-align: left;
		font-family: Malayalam Sangam MN;
		font-style: normal;
		font-weight: normal;
		font-size: 20px;
		color: rgba(34,44,65,1);
	}

<div id="view1">
	<div id="FlexGroup">
		<div id="content">
			<span>How to make container size to content. How to make container size to content. How to make container size to content. How to make container size to content. How to make container size to content. How to make container size to content. How to make container size to content. How to make container size to content. How to make</span>
		</div>
	</div>
	
</div>

Answer 1

如果您在子元素中设置了 position: absolute，则父元素不知道其子元素。因此，父元素的 height 不会随着子元素的增长而增长。为了让它工作，你需要在子元素中设置position: relative

var text = document.getElementById("content");

 text.innerText = document.body.innerText + document.body.innerText + document.body.innerText+ document.body.innerText;   

* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		border: none;
	}
	#view1 {
		position: absolute;
		background: #E5E5E5;
		width: 671px;
		height: auto;
		background-color: rgba(232,232,232,1);
		overflow: visible;
    border: 1px solid red;
	}
	#FlexGroup {
		position: relative;
		width: 589px;
    /* height:auto; */
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: space-between;
		flex-wrap: nowrap;
		overflow: visible;
		gap:  30px;
    
	}
	#content {
		position: relative;
		align-self: auto;
		overflow: visible;
		width: 590px;
		text-align: left;
		font-family: Malayalam Sangam MN;
		font-style: normal;
		font-weight: normal;
		font-size: 20px;
		color: rgba(34,44,65,1);
	}

<div id="view1">
	<div id="FlexGroup">
		<div id="content">
			<span>How to make container size to content. How to make container size to content. How to make containntto content. How to make container size to content. How to make</span>
		</div>
	</div>
	
</div>