Javascript：添加元素后，你能自动更新父容器的宽度吗？

Question

我有一个flexbox容器，里面有3个盒子;它是面向柱的，它包裹着并且有一个固定的高度。有一个按钮，当单击该按钮时，将向容器中添加一个新框。问题:设置为"fit-content"的父/容器的宽度在添加新的子框时不更新。是否有一种方法来自动更新父元素的大小时，添加子元素到它?你可以通过查看边框来查看父元素的大小是否更新了(稍后用DevTools确认)。

你可以在这个代码中看到这个网站:https://codepen.io/AN90/pen/yLEPQPK

HTML代码:

<button id="button-1">Button 1</button>        
<section class="boxes-container">
<div class="boxes" id="box-1"></div>
<div class="boxes" id="box-2"></div>
<div class="boxes" id="box-3"></div>
</section>

CSS代码:

button {
width: 80px;
height: 80px;
margin: 20px;
}
.boxes-container{    
display: flex;
flex-direction: column;
flex-wrap: wrap;
box-sizing: border-box;
width: fit-content;
height: 548px;
border: 4px solid #000;
}
.boxes {
width: 150px;
height: 150px;
background-color: rgb(113, 255, 113);
margin: 15px;
}

JS代码:

let btn1 = document.getElementById('button-1')
let boxNr = 3
let boxesContainer = document.querySelector('.boxes-container')
btn1.addEventListener('click', function() {
let box = document.querySelector('.boxes:last-child')
let duplicateBox = box.cloneNode(true)    
boxNr++
duplicateBox.id = `box-${boxNr}`
boxesContainer.appendChild(duplicateBox)    
})

这是一个通过变量和内联样式实现的解决方案，我认为这不是理想的:https://codepen.io/AN90/pen/OJEOaOb

问题在这里被问到，但没有真正回答:根据所添加的嵌套子div调整父div的大小

谢谢!

Answer 1

我不知道使用flexx实现这一目标的解决方案是什么，但我想推荐CSS网格来实现相同的视觉效果。

let btn1 = document.getElementById('button-1')
let boxNr = 3
let boxesContainer = document.querySelector('.boxes-container')
btn1.addEventListener('click', function() {
let box = document.querySelector('.boxes:last-child')
let duplicateBox = box.cloneNode(true)    
boxNr++
duplicateBox.id = `box-${boxNr}`
boxesContainer.appendChild(duplicateBox)    
})

button {
width: 80px;
height: 80px;
margin: 20px;
}
.boxes-container{    
display: grid;
box-sizing: border-box;
height: 548px;
width: fit-content;
border: 4px solid #000;
/* NEW */ grid-template-rows: repeat(3, 1fr); 
/* NEW */ grid-auto-flow: column;
}
.boxes {
width: 150px;
height: 150px;
background-color: rgb(113, 255, 113);
margin: 15px;
}

<button id="button-1">Button 1</button>        
<section class="boxes-container">
<div class="boxes" id="box-1"></div>
<div class="boxes" id="box-2"></div>
<div class="boxes" id="box-3"></div>
</section>