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>