In this snippet, the inner-left element gets a new item added to it every time the Add Item button is clicked. It has a max-width of 50% of the parent width, however the flex items are being wrapped before that max width is reached.
Where am I going wrong - how can I make it so that every time a new item is added, it's added beside the previous item, which increases the width of the inner-left element up to a max of 50% of it's parent width, at which point it starts to wrap the flex items?
function addItem() { var item = document.createElement('div'); item.classList.add('item'); document.getElementById('inner-left').appendChild(item);}function removeAllItems() { document.getElementById('inner-left').replaceChildren();}#outer-container { width: 400px; height: 100px; border: 1px solid black; padding: 5px; box-sizing: border-box; display: flex; flex-direction: row; gap: 5px;}#inner-left { max-width: 50%; height: 100%; display: flex; flex-flow: row wrap; gap: 5px; border: 1px solid red; box-sizing: border-box; padding: 5px; box-sizing: border-box; align-items: center;}#inner-right { width: 100%; border: 1px solid green; box-sizing: border-box;}.item { width: 30px; height: 10px; background-color: blue;}<div><div id="outer-container"><div id="inner-left"><!-- items added here --></div><div id="inner-right"></div></div><button onclick="addItem()">Add Item</button><button onclick="removeAllItems()">Remove All Items</button></div>