Одинаковые вкладки ширины на основе наибольшего содержания рядом

Question

Таким образом, я бы хотел достичь следующих условий:

• Ширина каждой вкладки основана на метке
• Все вкладки имеют размер, равный самой длинной вкладке (с самой длиннойlabel)
  • Таким образом, группа вкладок должна не быть фиксированной или занимать 100% родительского элемента.Должно быть основано на самой длинной вкладке.
• Расположение вкладок расположено рядом.

Пока это мой прогресс (не такой же ширины, как у самой большой): https://jsfiddle.net/cyhwx7z0/5/

Я пробовал это решение , но расположение не рядом.https://jsfiddle.net/alexkwa/L9oy6hbp/1/

HTML

<div class="wrapper">
  <ul class="tab-group">
    <li class="single-tab">Tab 1</li>
    <li class="single-tab">Tab 2</li>
    <li class="single-tab">Very Long Tab Name</li>
    <li class="single-tab active">Tab 4</li>
    <li class="single-tab">Tab 5</li>
  </ul>
</div>

SCSS

$active-color: #262933;
$inactive-color: #B3B4B8;
$inactive-font-color: #8B8C8F;
$border-thickness: 1px;
$border-radius: 3px;

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}

.wrapper {
  display: inline-block;
}

.tab-group {
  display: flex;
  flex-direction: column;
  list-style: none;
}

.single-tab {
  background-color: #fff;
  border: $border-thickness solid $inactive-color;
  border-right: 0;
  border-sizing: border-box;
  color: $inactive-font-color;
  cursor: normal;
  font-size: 14px;
  padding: 9px 21px;
  margin: 0;  
  margin-left: -6px;
  user-select: none; 

  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.single-tab:first-child {
  border-radius: $border-radius 0 0 $border-radius;
}

.single-tab:last-child {
  border-radius: 0 $border-radius $border-radius 0;
  border-right: $border-thickness solid $inactive-color;
}

.single-tab.active {
  background-color: $active-color;
  border: $border-thickness solid $active-color;
  color: #fff;
}

.single-tab.active + .single-tab {
  border-left: 0;
}

.single-tab:last-child.active {
  border-left: 0;
}

Есть идеи?

Answer 1

Попробуйте это

.tab-group {
  display: flex; // instead of inline flex
  ... all other styles
}

.single-tab {
  flex: 1; // makes your tabs of same width
  ... all other styles
}

Вот рабочая скрипка - https://jsfiddle.net/flexdinesh/xuc6amcu/2/

Если вы требуете, чтобы родитель не занимал всю ширину, вы должны определить это вручную, скажем, 60%.Пример скрипки - https://jsfiddle.net/flexdinesh/xuc6amcu/3/