Tabs with only CSS (specifically, vertical Tabs) - css

Question

I am creating my personal version of Tabs using only a CSS solution, specifically a version in which Tabs are placed aside content, in a vertical solution, so I'd need to have Tabs on the left and content on the right.
My fisrt attempt was using "Absolute positioning", to place each full content on the right side, mantaining tabs on the left. This solution runs correcly playing with opacity value of each one, as you can see in the linked example.
But... it's have a limit... Due to absolute positioning I have to "force" an height of the entire Tabs container with overflow-y:auto; rule applied to longest content. In this way, there will always be a content that will make scrollable Tabs container and not the entire page.
In an attempt to supersede these limitations, i found a possible solution using Grid layout applied to inner content, that is "animatable to auto" (please see reference here at the end of article). The specific code of the example was:
.content {
display: grid;
grid-template-rows: 0fr;
transition: 1s;
overflow: hidden;
}
.content .inside {
min-height: 0;
}
.content.expanded {
grid-template-rows: 1fr;
}
Applying it to my case, would result in this HTML:
<div class="tabs-css vertical">
<div class="tab-accordion-item">
<input id="tab-accordion_hoqc_1" type="radio" name="tab-accordion" checked="">
<label for="tab-accordion_hoqc_1"> Intestazione Tab 1 </label>
<div class="item-content">
<div class="item-content-inner">
<div class="description">
<p>...</p>
</div>
</div>
</div>
</div>
<div class="tab-accordion-item">
<input id="tab-accordion_hoqc_2" type="radio" name="tab-accordion">
<label for="tab-accordion_hoqc_2">Questa è una intestazione di prova lunga</label>
<div class="item-content">
<div class="item-content-inner">
<div class="description">
<p>...</p>
</div>
<div></div>
</div>
</div>
</div>
</div>
and this sCSS:
.tabs-css
{
display:flex;
position:relative;
height: 300px;
> .tab-accordion-item
{
$label-height:45px;
> label
{
display:block;
background: gray;
color: white;
}
> .item-content
{
overflow-y:auto;
position:absolute;
z-index:1;
top:3px;
left:0;
height:calc(100% - $label-height + 3px); // Container height - Label height + Container padding-top
width:100%;
opacity:0;
.item-content-inner {
min-height: 0;
}
}
> input[type=radio]
{
display:none;
&:checked
{
+ label
{
z-index:2;
background: red;
+ .item-content
{
opacity:1;
z-index:3;
}
}
}
}
}
&.vertical {
flex-direction: column;
> .tab-accordion-item
{
> label
{
max-width: 400px;
padding: 10px 16px;
height: auto;
line-height: inherit;
white-space: normal;
}
> .item-content {
top: 0;
bottom: 0;
left: 450px;
width: auto;
height: auto;
}
}
}
}
But, renouncing to absolute positioning I'm not able to replicate side Tabs layout.
I could add:
.tab-accordion-item {
display: flex;
}
That "seems" similar to what I'd need, placing side-by-side Tab and relative content, but the behaviour si more similar to an Accordion, instead of a Tab...