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>

标签： htmlcss

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>