Javascript: can you automatically update the width of a parent's container after adding element-CodePudding

I have a flexbox container with 3 boxes inside; it is column-oriented, it wraps and has a fixed height. There is a button which, when clicked, adds a new box to the container. Problem: the width of the parent/container, set to 'fit-content', doesn't update when the new child boxes are added. Is there a way to automatically update the size of the parent element when adding child elements to it? You can see if the parent's size was updated by looking at the border (and by confirming it later with DevTools).

You can see the site in this codepen: https://codepen.io/AN90/pen/yLEPQPK

HTML code:

<button id="button-1">Button 1</button>        

<section >
  <div  id="box-1"></div>
  <div  id="box-2"></div>
  <div  id="box-3"></div>
</section>

CSS code:

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 code:

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)    
})

Here is a codepen with a solution reached through variables and inline-styling, which I think is not ideal: https://codepen.io/AN90/pen/OJEOaOb

Question was asked here but not really answered: Resize the parent div according the as nested child div is added

Thank you!

CodePudding user response：

I do not know what the solution would be while using flexbox to achieve this, but I would like to recommend CSS grid to achieve this same (ish) visual effect.

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 >
  <div  id="box-1"></div>
  <div  id="box-2"></div>
  <div  id="box-3"></div>
</section>