在此代码片段中,inner-left
每次单击“添加项目”按钮时,都会向元素添加一个新项目。它具有max-width
父级宽度的 50%,但在达到最大宽度之前,弹性项目会被包裹。
我哪里做错了——我怎样才能做到每次添加新项目时,都将其添加到前一个项目旁边,从而将元素的宽度增加到inner-left
其父宽度的最大 50%,此时它开始包装弹性项目?
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>