Сжимать элементы div при добавлении новых

Я постараюсь объяснить это как можно лучше. Я хочу применить этот принцип к своему.

Как вы можете видеть, я добавляю "вкладки" в панель вкладок. Когда я добавляю достаточно вкладок, чтобы заполнить всю панель вкладок, и я продолжаю добавлять больше, эти вкладки в основном изменяют размер, чтобы соответствовать div. Я не хочу, чтобы они расширяли div или использовали полосу прокрутки для перемещения между ними. Я хочу, чтобы они сжимались внутри div. Вы можете увидеть точный пример в GIF, который я связал.

Он также должен вести себя одинаково при изменении размера окна.

Пример изменения размера окна

Есть ли у вас какие-либо идеи о том, как достичь этого? Я попытался с JQuery, но это было слишком много "жесткого кодирования", это не сработало бы при изменении размера и разных разрешениях экрана.

HTML Я хочу применить:

<div class="l_tabs">
 <div>
  <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>
  </ul>
 </div>
</div>

Когда я добавляю новую вкладку, она добавляет это <li class="contentTab"></li>

JSFiddle

Любые предложения?

Ответ 1

Вы можете сделать это с помощью Flexbox, вам просто нужно установить flex-basis

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

$('.remove').click(function() {
  $('.tab').last().remove();
})

.tabs {
  display: flex;
  list-style: none;
  padding: 0;
}
.tab {
  border: 1px solid black;
  flex-basis: 200px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs">
  <li class="tab">Lorem ipsum</li>
</ul>

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

Ответ 2

Вы можете использовать display: table и display: table-cell для этого:

$("#add").click(function() {
  $("<li>", { "class": "tab", "text": "Lorem ipsum" }).appendTo(".tabs");
});

$("#del").click(function() {
  $(".tab").last().remove();
});

.tabs {
  display: table;
  border-collapse: collapse;
  padding: 0;
}
.tab {
  display: table-cell;
  width: 200px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="tabs">
  <li class="tab">Lorem ipsum</li>
</ul>

<button id="add">Add Tab</button>
<button id="del">Remove Tab</button>

Ответ 3

$('.tab-add').click(function() {
  $('.tab-add').html('+');
  var lastCount = $('#myTab1 li:last-child').html();
  var plusOne = parseInt(lastCount) + 1;
  $('#myTab1').append('<li class="contentTab">' + plusOne + '</li>');
});

* {
  margin: 0; padding: 0;
}
.l_tabs {
  width: 100%;
  background-color: red;
}
#myTab1 {
  display: flex;
  list-style-type: none;
}
#myTab1 li {
  display: flex; 
  justify-content: center;
  flex: 1;
  line-height: 50px;
  color: white;
  background-color: hsla(0, 0%, 20%, 1);
}
#myTab1 li:nth-child(even) {
  background-color: hsla(0, 0%, 40%, 1);
}
.tab-add:hover {
  background-color: hsl(0, 55%, 55%)!important;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="l_tabs">
 <div>
  <ul id="myTab1" class="nav nav-tabs bordered">
   <li class="tab-add">click to add</li>
   <li class="contentTab">1</li>
   <li class="contentTab">2</li>
   <li class="contentTab">3</li>
   <li class="contentTab">4</li>
  </ul>
 </div>
</div>

Ответ 4

Вы можете использовать flexbox, чтобы сделать именно то, что вы хотите

ul {
  display: -webkit-box;
}


ul li {
  -webkit-box-flex: 1;
  background: #ddd;
  padding: 10px 15px 6px 15px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 180px;
  min-width: 60px;
  border: solid #ccc 1px;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  text-overflow: ellipsis;  
}