How to resize tab width automatically in HTML5 - css

Question

I want to automatically resize the container based on <div>. If there are 4 <div> inside container then it looks fine but if there is only 1 <div> then there will be plenty of space in right side. So wanted to adjust container size according to <div>. How can I achieve this? Please help me.
main page looks like this
When there are 4 panels it fits perfectly fine like this
When there are 2 panels then there is plenty of space in the right side which which is marked by color. I want to adjust the container width here automatically.
<div class="container">
<div class="row">
<div>
<ul class="nav nav-tabs" id="ATab">
<li class="active"><a data-toggle="tab" href="#Select">Select</a></li>
<li><a data-toggle="tab" href="#Criteria">Criteria</a></li>
</ul>
<div class="tab-content">
<div id="Select" class=" tab-pane fade in active"></div>
<div id="Criteria" class="tab-pane fade"></div>
<div class="container active col-md-3 col-sm-6 ">
<div class="panel panel-default">
<div class="panel-heading">First Name</div>
</div>
</div>
<div class="container active col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">Last Name</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

You can use flexbox for this behavior. Check this codepen for demo.
HTML:
<div class="parent">
<ul class="nav">
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ul>
</div>
CSS:
.parent {
background-color: orange;
}
.parent ul.nav {
list-style: none;
padding: 0px;
margin: auto;
display: flex;
}
.parent ul.nav li {
background-color: grey;
padding: 10px 15px;
border-right: 1px solid black;
width: 100%;
text-align: center;
}
.parent ul.nav li:last-child {
border: 0px;
}
Hope this would help!
EDIT 1:
Check this other codepen for demo.
body {
padding: 0px;
margin: 0;
}
.parent {
background-color: orange;
padding: 20px;
}
.parent .tabFrame .itemContainer {
display: inline-block;
margin-bottom: 50px;
padding: 5px;
border: 1px solid;
overflow: hidden;
}
.parent .tabFrame .myItem {
background-color: grey;
display: inline-block;
width: 100px; /* can be any fixed width */
padding: 10px;
color: white;
border: 1px solid black;
}
<div class="parent">
<div class="tabFrame">
<div>Tab area</div>
<div class="itemContainer">
<div class="myItem">Item 1</div>
<div class="myItem">Item 2</div>
<div class="myItem">Item 3</div>
<div class="myItem">Item 4</div>
</div>
</div>
<div class="tabFrame">
<div>Tab area</div>
<div class="itemContainer">
<div class="myItem">Item 1</div>
<div class="myItem">Item 2</div>
<div class="myItem">Item 3</div>
</div>
</div>
<div class="tabFrame">
<div>Tab area</div>
<div class="itemContainer">
<div class="myItem">Item 1</div>
<div class="myItem">Item 2</div>
</div>
</div>
<div class="tabFrame">
<div>Tab area</div>
<div class="itemContainer">
<div class="myItem">Item 1</div>
</div>
</div>
</div>
EDIT: 2
See this codepen
.myTab {
border: 1px solid #dddddd;
display: inline-block;
margin-top: -1px;
}
.myTab .tab-pane .myPanel {
display: inline-block;
margin: 10px;
}
.myPanel {
min-width: 200px;
}
#ATab {
border-bottom: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div>
<ul class="nav nav-tabs" id="ATab">
<li class="active">
<a data-toggle="tab" href="#Select">Select</a>
</li>
<li>
<a data-toggle="tab" href="#Criteria">Criteria</a>
</li>
</ul>
<div class="tab-content clearfix myTab">
<br>
<div id="Select" class=" tab-pane fade in active clearfix">
<div class="panel panel-default myPanel">
<div class="panel-heading">First Name</div>
</div>
<div class="panel panel-default myPanel">
<div class="panel-heading">Last Name</div>
</div>
</div>
<div id="Criteria" class="tab-pane fade">
<div class="panel panel-default myPanel">
<div class="panel-heading">First Name</div>
</div>
<div class="panel panel-default myPanel">
<div class="panel-heading">Last Name</div>
</div>
<div class="panel panel-default myPanel">
<div class="panel-heading">First Name</div>
</div>
<div class="panel panel-default myPanel">
<div class="panel-heading">Last Name</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 2

Try using css flexbox to get rid of unwanted spaces.
.nav {
display:flex;
}
a {
text-decoration: none;
color:white;
}
li {
background-color:#232323;
list-style-type: none;
padding: 20px;
flex: 1 1 auto;
}
li.active{
background-color:gray;
}
<div class="container">
<div class="row">
<div>
<ul class="nav nav-tabs" id="ATab">
<li class="active"><a data-toggle="tab" href="#Select">Select</a></li>
<li><a data-toggle="tab" href="#Criteria">Criteria</a></li>
</ul>
<div class="tab-content">
<div id="Select" class=" tab-pane fade in active"></div>
<div id="Criteria" class="tab-pane fade"></div>
</div>
</div>
</div>
</div>
The flex: 1 1 auto on the li makes the li fill up any remaining space on the main flex axis (horizontal line because the default flex direction is row)
You can read up on flex box :
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/almanac/properties/f/flex/