css Question posted in
Some basic documentation can be found here.

Css – Flex container not reaching max width before wrapping children

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

2

Answers


  1. 0

    It’s happening because inner-right has a width of 100%. Switch that to flex-grow: 1.

    Login or Signup to reply.
  2. 0

    Just add flex: 1 0 auto to the #inner-left element.
    (flex-grow, flex-shrink, flex-basis).

    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;
  flex:1 0 auto;
}

#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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search