So this would probably be better done using JavaScript, but a solution does exist in CSS, if you're willing to allow certain constraints on widths and heights and where the scrollbar ends up.
The basic idea is to make the tabs themselves be inline-block, and have their container have overflow-x: auto. That will put a horizontal scrollbar on the container when the tabs get too big.
That said, that requires the container to have a fixed size, and you have to force the content to have a fixed size too if you're going to keep the content elements inside each of the tabs' divs. I wouldn't want to build it this way if I could avoid it, but this is a pure HTML-and-CSS solution.
A runnable snippet, derived from your original, is below. I set the width on the container specifically to 300px so you can see what the horizontal overflow looks like.
.tabs {
position: relative;
min-height: 200px;
clear: both;
margin: 0;
padding-top: 15px;
width: 300px;
white-space: nowrap;
overflow-x: auto;
}
.tab {
display: inline-block;
vertical-align: top;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
cursor:pointer;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.tab .content {
position: fixed;
white-space: normal;
top: 50px;
left: 0;
background: white;
height: 100px;
right: 0;
bottom: 0;
padding: 20px;
width: 266px;
border: 1px solid #ccc;
}
.tab [type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
.tab [type=radio]:checked ~ label ~ .content {
z-index: 1;
}
<div class="tabs">
<div class="tab">
<input name="tab-group-1" id="tab-1" type="radio"/>
<label for="tab-1">Tab One</label>
<div class="content">
Content 1
</div>
</div>
<div class="tab">
<input name="tab-group-1" id="tab-2" type="radio"/>
<label for="tab-2">Tab Two</label>
<div class="content"> Content 2 </div>
</div>
<div class="tab">
<input name="tab-group-1" id="tab-3" type="radio"/>
<label for="tab-3">Tab Three</label>
<div class="content"> Content 3 </div>
</div>
<div class="tab">
<input name="tab-group-1" id="tab-4" type="radio"/>
<label for="tab-4">Tab Four</label>
<div class="content"> Content 4 </div>
</div>
</div>
Update: Per request, here's a way to have the horizontal scrollbar sandwiched between the tabs and the content. Bear in mind that this is even hackier than the above solution, really abusing overflow and height control, but it's doable. Just don't try to put anything below the content divs, because that definitely won't work well.
.tabs {
position: relative;
clear: both;
margin: 0;
padding-top: 15px;
width: 300px;
height: 45px;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
.tab {
display: inline-block;
vertical-align: top;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
cursor:pointer;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.tab .content {
position: fixed;
white-space: normal;
top: 70px;
left: 0;
background: white;
height:100px;
right: 0;
bottom: 0;
padding: 20px;
width: 266px;
border: 1px solid #ccc;
}
.tab [type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
.tab [type=radio]:checked ~ label ~ .content {
z-index: 1;
}
<div class="tabs">
<div class="tab">
<input name="tab-group-1" id="tab-1" type="radio"/>
<label for="tab-1">Tab One</label>
<div class="content">
Content 1
</div>
</div>
<div class="tab">
<input name="tab-group-1" id="tab-2" type="radio"/>
<label for="tab-2">Tab Two</label>
<div class="content"> Content 2 </div>
</div>
<div class="tab">
<input name="tab-group-1" id="tab-3" type="radio"/>
<label for="tab-3">Tab Three</label>
<div class="content"> Content 3 </div>
</div>
<div class="tab">
<input name="tab-group-1" id="tab-4" type="radio"/>
<label for="tab-4">Tab Four</label>
<div class="content"> Content 4 </div>
</div>
</div>
