子div增长时容器div不会增长?

时间:2019-11-11 18:21:16

标签: html css

当内容大小更改时,如何使容器适合内容的大小?请注意,添加更多内容时,背景填充不会扩展。

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>

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

您可以在#view1中删除高度,也可以删除位置:#FlexGroup中的绝对值

    #view1 {
    position: absolute;
    background: #E5E5E5;
    width: 671px;
    background-color: rgba(232,232,232,1);
    overflow: visible;
}
    #FlexGroup {
    width: 589px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: nowrap;
    overflow: visible;
    gap:  30px;
}

如果需要,您也可以不带位置移动#FlexGroup