How to adjust divs to decrease their size as you add new sister divs?

Issue

I need a parent div to occupy the entire width of the screen and when adding child divs inside the parent div, the child divs will decrease the width so that they all fit inside the parent div without having scrool. Equal behavior of browsers when adding new tabs.tabs

Solution

Just use display: flex; on the container. The default flex-shrink will handle the rest:

document.querySelector('button').addEventListener('click', function() {
  const div = document.createElement("div");
  document.querySelector('.container').appendChild(div);
});

.container {
  display: flex;
}

/* for visualization only */
.container {
  border: 2px dashed red;
  height: 50px;
}

.container > div {
  width: 100px;
  border: 3px solid blue;
}

<div class="container"></div>
<button>Click me to add an Element</button>

Answered By - tacoshy