masterfan masterfan - 2 months ago 4
CSS Question

Shrink div elements while adding new ones

I'll try to explain it as best as I can. I want to apply this principle to my own.

Tab Add Example

As you can see I'm adding 'tabs' to tab bar. When I add enough tabs to fill the whole tab bar, and I keep adding more, those tabs basically resize to fit the div. I don't want them to expand the div or to use the scroll bar to move among them. I want them to shrink within the div. You can see the exact example on the GIF I linked.

It should also behave the same on window resize.

Window Resize Example

Do you have any ideas on how to achieve this? I tried with JQuery but it was too much 'hard coding', it wouldn't work on resize, nor different screen resolutions.

HTML I want to apply:

<div class="l_tabs">
<ul id="myTab1" class="nav nav-tabs bordered">
<li class="tab-add"></li>
<li class="contentTab"></li>
<li class="contentTab"></li>
<li class="contentTab"></li>
<li class="contentTab"></li>

When I add new tab it adds this

<li class="contentTab"></li>


Any suggestions?


You can do this with Flexbox, you just need to set flex-basis

$(".add").click(function() {
  $(".tabs").append('<li class="tab">Lorem ipsum</li>');

$('.remove').click(function() {
.tabs {
  display: flex;
  list-style: none;
  padding: 0;
.tab {
  border: 1px solid black;
  flex-basis: 200px;
  text-align: center;
<script src=""></script>
<ul class="tabs">
  <li class="tab">Lorem ipsum</li>

<button class="add">Add Tab</button>
<button class="remove">Remove Tab</button>