title: parent content height not expanding with tabs content height
body: <p>I am trying to display tabs content in pure css, but i am unable to fix this height for parent. if content is more in tabs content parent content(red area) not expanding. please help to to expanding the parent (red area) when content is more and after clicking on other tab, previous tab content not hidden. please need help in two cases.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.tabs-container {
    background: red;
    padding: 30px;
    height: 100%;
  }
  
  .tabs {
    position: relative;
    clear: both;
    margin: 25px 0;
  }
  
  .tab {
    display: block;
    width: 220px;
  }
  
  .tab label {
    background: #eee;
    padding: 10px;
    border: 1px solid #ccc;
    border-right: none;
    margin-left: -1px;
    position: relative;
    left: 1px;
    width: 200px;
    display: inline-block
  }
  
  .tab [type=radio] {
    display: none;
  }
  
  .content {
    position: absolute;
    top: 0px;
    left: 220px;
    background: white;
    right: 0;
    padding: 20px;
    border: 1px solid #ccc;
    overflow: hidden;
  }
  
  .content &gt; * {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
  }
  
  [type=radio]:checked ~ label {
    background: white;
    border-bottom: 1px solid #ccc;
    z-index: 2;
  }
  
  [type=radio]:checked ~ label ~ .content {
    z-index: 1;
  }
  
  [type=radio]:checked ~ label ~ .content &gt; * {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="tabs-container"&gt;
    &lt;div class="tabs"&gt;
      &lt;!--tabs--&gt;
      &lt;div class="tab"&gt;
        &lt;input type="radio" id="tab-1" name="tab-group-1" checked=""&gt;
        &lt;label for="tab-1"&gt;Tab One&lt;/label&gt;
        &lt;!--tabs-content--&gt;
        &lt;div class="content"&gt;
          &lt;p&gt;Our expert team allows us to offer Protective Coating services, which is famous for its variety of benefits such as offering universal strainers for light shades, offers breath ability for preventing moisture, curing a tough flexible &amp; abrasion
            resistant coating, resistant to chalking and flaking and offering strong bonding on cement concrete, asbestos &amp; mild steel. Our range of services finds its application in various areas like chajjas, external vertical walls, china mosaic tiles,
            water tanks (externally), sloppy roofs, asbestos roof, roof terraces and stone walls. These services consist of acrylic elastomeric dust proof coating and polyurethane waterproof coatings. Protective Coating Our expert team allows us to offer
            Protective Coating services, which is famous for its variety of benefits such as offering universal strainers for light shades, offers breath ability for preventing moisture, curing a tough flexible &amp; abrasion resistant coating, resistant to
            chalking and flaking and offering strong bonding on cement concrete, asbestos &amp; mild steel. Our range of services finds its application in various areas like chajjas, external vertical walls, china mosaic tiles, water tanks (externally), sloppy
            roofs, asbestos roof, roof terraces and stone walls. These services consist of acrylic elastomeric dust proof coating and polyurethane waterproof coatings.&lt;/p&gt;
        &lt;/div&gt;
        &lt;!--tabs-content end--&gt;
      &lt;/div&gt;
  
      &lt;!--tabs--&gt;
      &lt;div class="tab"&gt;
        &lt;input type="radio" id="tab-2" name="tab-group-1" checked=""&gt;
        &lt;label for="tab-2"&gt;Tab One&lt;/label&gt;
        &lt;!--tabs-content--&gt;
        &lt;div class="content"&gt;
          &lt;p&gt;Stuff for Tab One&lt;/p&gt;
        &lt;/div&gt;
        &lt;!--tabs-content end--&gt;
      &lt;/div&gt;
  
      &lt;!--tabs--&gt;
      &lt;div class="tab"&gt;
        &lt;input type="radio" id="tab-3" name="tab-group-1" checked=""&gt;
        &lt;label for="tab-3"&gt;Tab One&lt;/label&gt;
        &lt;!--tabs-content--&gt;
        &lt;div class="content"&gt;
          &lt;p&gt;Protective Coating
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;!--tabs-content end--&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>working codepen</strong> <a href="http://codepen.io/srinivashappy/pen/xOgJwx?editors=1100" rel="nofollow">link</a></p>