Javascript: can you automatically update the width of a parent's container after adding elements to it?

Question

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 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 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!

Answer 1

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