Same width tabs based on largest content side by side - css

Question

So the conditions that I would like to achieve is
Width of each tab is based on the label
All tabs are the same size as the longest tab (with longest label)
As such the tab group should not be fixed or take up 100% of parent. Should be based on longest tab.
The layout of the tabs are side by side.
This is my progress so far (not same width as largest): https://jsfiddle.net/cyhwx7z0/5/
I have tried this solution but the layout is not side by side. 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;
}
Any ideas?

Answer 1

Try this
.tab-group {
display: flex; // instead of inline flex
... all other styles
}
.single-tab {
flex: 1; // makes your tabs of same width
... all other styles
}
Here's the working fiddle - https://jsfiddle.net/flexdinesh/xuc6amcu/2/
If you require the parent to not take up the full width, you have to define it manually, say 60%. Example fiddle - https://jsfiddle.net/flexdinesh/xuc6amcu/3/