Make child tab overflow tab bar (using flexbox) - html

Question

I'm trying to add a little design flourish to some tabs.
The tabs are contained inside a tab bar, which has a bottom border.
When a tab is active I want it to appear as if it's on the same level of the content, with the other tabs appearing set back.
To do this, I need to make the section of border beneath the active tab disappear - my first thought was to set the tab background white and overlap the parent - but this doesn't work.
Anyone got any ideas as to how to get the effect I'm looking for?
.container {
padding: 30px;
}
.tab-bar {
display: flex;
background-color: #fff;
border-bottom: solid 1px rgba(0,0,0, .12);
height: 48px;
overflow: hidden;
}
.tab {
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: center;
height: 48px;
max-width: 200px;
min-width: 100px;
padding: 0 16px;
}
.tab[data-state="active"] {
box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 1px 0 rgba(0,0,0,0.12);
color: red;
}
<div class="container">
<div class="tab-bar">
<div class="tab" data-state="active">Active</div>
<div class="tab">Not Active</div>
</div>
</div>
Link to JsFiddle

Answer 1

from earlier comment
draw the bottom border from the non active tabs
add eventually a pseudo element to fill the room left.
overflow:hidden on the parent hides shadows and also do not allow children to stand on top of the border in order to hide it
What you could do :
.container {
padding: 30px;
}
.tab-bar {
display: flex;
background-color: #fff;
height: 48px;
}
.tab {
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: center;
max-width: 200px;
min-width: 100px;
padding: 0 16px;
border-bottom: solid 1px rgba(0, 0, 0, .12);
}
.tab-bar::after {
content: '';
flex: 1;
border-bottom: solid 1px rgba(0, 0, 0, .12);
}
.tab[data-state="active"] {
box-shadow: 0 -2px 4px -1px rgba(0, 0, 0, 0.2), 0 -4px 5px 0 rgba(0, 0, 0, 0.14), 0 -1px 1px 0 rgba(0, 0, 0, 0.12);
color: red;
border-bottom: none;
}
<div class="container">
<div class="tab-bar">
<div class="tab" data-state="active">Active</div>
<div class="tab">Not Active</div>
</div>
</div>

Answer 2

You should overflow: hidden from .tab-bar.
But after you remove it. It seems not to be as you wanted ("the same level of the content").
So I edited box-shadow of active tab. to make it with no box-shadowfrom button.
border-bottom: 1px solid white is responsible to override tab-bar border
See Full Example here:
.container {
padding: 30px;
}
.tab-bar {
display: flex;
background-color: #fff;
border-bottom: solid 1px rgba(0,0,0, .12);
height: 48px;
}
.tab {
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: center;
height: 48px;
max-width: 200px;
min-width: 100px;
padding: 0 16px;
}
.tab[data-state="active"] {
box-shadow: -4px -2px 4px -1px rgba(0,0,0,0.1), 4px -2px 4px -1px rgba(0,0,0,0.1);
color: red;
border-bottom: 1px solid white;
}
<div class="container">
<div class="tab-bar">
<div class="tab" data-state="active">Active</div>
<div class="tab">Not Active</div>
</div>
</div>