当内容大小发生变化时,如何让容器适应内容的大小?请注意,当添加更多内容时,背景填充不会扩展。
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>
最佳答案
如果您在子元素中设置了 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>
关于html - 子div增长时容器div不增长?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58806690/