title: How to make a parent element's height expand with the absolute positioned child element?
body: <p>I have a page with <code>.main_wrapper</code> class which contains two child div of id <code>#tariff-section</code> and <code>#item-desc</code>.
  The <code>#tariff-section</code> contains <code>.tabs</code> which contains <code>.tab-content</code> element with information that flows out of it and covers the <code>#item-desc</code> contents. And that is the problem. I observed that the <code>#tariff-section</code> doesn't expand in its height while the <code>.tab-content</code> elements in the <code>#tariff-section</code> has <code>position:absolute;</code> and thus overflow and covers the <code>#item-desc</code>. 
  Is there a way to prevent the cover of this absolute element from <code>#item-desc</code>
  The jsfiddle is:</p>
  
  <p><a href="https://jsfiddle.net/zuheab/xz6d3tp5/6/" rel="nofollow noreferrer">https://jsfiddle.net/zuheab/xz6d3tp5/6/</a></p>
  
  <p>And the code is given below:</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>css .main_wrapper {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  #tariff-section {
    margin-left: 30px;
    background: #ddd;
    height: 100vh;
  }
  
  .tabs {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
  }
  
  .tabs li {
    float: left;
  }
  
  .tabs li&gt;input {
    display: none;
  }
  
  .tabs li&gt;label {
    display: inline-block;
    border: 1px solid #fff;
    height: 30px;
    vertical-align: middle;
    border-right-width: 0;
    border-bottom-width: 0;
    padding: 5px 20px;
    cursor: pointer;
    box-shadow: none;
  }
  
  .tabs li:last-child&gt;label {
    border-right-width: 1px;
  }
  
  .tabs .tab-content {
    display: none;
    position: absolute;
    left: 0;
    padding: 20px;
    min-height: 500px;
    border: 1px solid #fff;
    box-shadow: 1px 3px 3px #ddd;
    width: 95%;
    background: #fff;
  }
  
  .tabs:after {
    content: "";
    clear: both;
    display: block;
    height: 240px;
  }
  
  
  /* functional */
  
  .tabs li&gt;input:checked+label {
    background: white;
    box-shadow: 1px 0px 1px #ddd;
  }
  
  .tabs li&gt;input:checked~.tab-content {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
  
  
  /* promo - content*/
  
  .tabs li&gt;input:checked~.tab-content&gt;.promo-content {
    display: grid;
    grid-template-columns: 10% 55% 35%;
    height: 200px;
    background: #fff;
    padding: 20px;
    box-shadow: 1px 0px 1px #ddd;
  }
  
  .tabs li&gt;input:checked~.tab-content&gt;.promo-content&gt;.promo-desc&gt;.promo-header-section {
    display: grid;
    grid-template-columns: 50% 50%;
  }
  
  .tabs li&gt;input:checked~.tab-content&gt;.promo-content&gt;.promo-desc&gt;.services-included-section {
    display: grid;
    grid-template-columns: 60% 40%;
  }
  
  .tabs li&gt;input:checked~.tab-content&gt;.promo-content&gt;.promo-desc&gt;.services-included-section .services {
    display: grid;
    grid-template-columns: 70% 20%;
  }
  
  #item-desc {
    margin-left: 30px;
    margin-right: 30px;
    padding: 5px;
    background: #fff;
  }
  
  #desc-contents {
    margin: 10px;
    padding: 10px;
  }
  
  h4 {
    color: skyblue;
  }
  
  p {
    color: #333;
    margin-top: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="main_wrapper"&gt;
  
  
    &lt;div id="tariff-section"&gt;
      &lt;ul class="tabs"&gt;
        &lt;li&gt;
          &lt;input type="radio" name="company-tab" id="tab-29" checked=""&gt;
          &lt;label for="tab-29"&gt;SECTION 1&lt;/label&gt;
          &lt;div class="tab-content"&gt;
            &lt;div class="promo-content"&gt;
              &lt;div class="logo"&gt;&lt;/div&gt;
              &lt;div class="promo-desc"&gt;
                &lt;div id="Giga Combi Plus" class="promo-header-section"&gt;
                  &lt;div class="promo-header"&gt;
                    &lt;h4&gt;Giga Combi Plus a&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="services-included-section"&gt;
                    &lt;div class="services"&gt;
                      &lt;h4&gt;Services&lt;/h4&gt;
                      &lt;div&gt;
                        &lt;p&gt;EU Roaming - inkl.&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                        &lt;p&gt;Unli Internet - inkl.&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                        &lt;p&gt;Max Speed - 500 MB&lt;/p&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="tarif-desc"&gt;
                &lt;div class="tariff-data"&gt;
                  &lt;p&gt;One Connection Fee: € 10&lt;/p&gt;
                  &lt;p&gt;Basic Fee: € 24&lt;/p&gt;
                  &lt;div&gt;
                    &lt;a style="color:blue;" href="details.php?item_id=5&amp;amp;attribute_id=40&amp;amp;tariff_id=46&amp;amp;col=37"&gt;Select Tariff&lt;/a&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="promo-content"&gt;
              &lt;div class="logo"&gt;&lt;/div&gt;
              &lt;div class="promo-desc"&gt;
                &lt;div id="Giga Combo Max" class="promo-header-section"&gt;
                  &lt;div class="promo-header"&gt;
                    &lt;h4&gt;Giga Combo Max a&lt;/h4&gt;
                    &lt;p&gt;Awesome&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="services-included-section"&gt;
                    &lt;div class="services"&gt;
                      &lt;h4&gt;Services&lt;/h4&gt;
                      &lt;div&gt;
                        &lt;p&gt;EU Roaming - inkl.&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                        &lt;p&gt;Unli Internet - inkl.&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                        &lt;p&gt;Unli SMS - inkl.&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                        &lt;p&gt;Unli Speed - inkl.&lt;/p&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="tarif-desc"&gt;
                &lt;div class="tariff-data"&gt;
                  &lt;p&gt;One Connection Fee: € 9&lt;/p&gt;
                  &lt;p&gt;Basic Fee: € 19&lt;/p&gt;
                  &lt;div&gt;&lt;a style="color:blue;" href="details.php?item_id=5&amp;amp;attribute_id=40&amp;amp;tariff_id=43&amp;amp;col=37"&gt;Select Tariff&lt;/a&gt;&lt;/div&gt;
                &lt;/div&gt;
  
              &lt;/div&gt;
            &lt;/div&gt;
  
  
            &lt;div class="promo-content"&gt;
              &lt;div class="logo"&gt;&lt;/div&gt;
              &lt;div class="promo-desc"&gt;
                &lt;div id="Giga Combi Plus" class="promo-header-section"&gt;
                  &lt;div class="promo-header"&gt;
                    &lt;h4&gt;Giga Combi Plus b&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="services-included-section"&gt;
                    &lt;div class="services"&gt;
                      &lt;h4&gt;Services&lt;/h4&gt;
                      &lt;div&gt;
                        &lt;p&gt;EU Roaming - inkl.&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                        &lt;p&gt;Unli Internet - inkl.&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                        &lt;p&gt;Max Speed - 500 MB&lt;/p&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="tarif-desc"&gt;
                &lt;div class="tariff-data"&gt;
                  &lt;p&gt;One Connection Fee: € 10&lt;/p&gt;
                  &lt;p&gt;Basic Fee: € 24&lt;/p&gt;
                  &lt;div&gt;&lt;a style="color:blue;" href="details.php?item_id=5&amp;amp;attribute_id=40&amp;amp;tariff_id=46&amp;amp;col=37"&gt;Select Tariff&lt;/a&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="promo-content"&gt;
              &lt;div class="logo"&gt;&lt;/div&gt;
              &lt;div class="promo-desc"&gt;
                &lt;div id="Giga Combi Plus" class="promo-header-section"&gt;
                  &lt;div class="promo-header"&gt;
                    &lt;h4&gt;Giga Combi Plus c&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="services-included-section"&gt;
                    &lt;div class="services"&gt;
                      &lt;h4&gt;Services&lt;/h4&gt;
                      &lt;div&gt;
                        &lt;p&gt;EU Roaming - inkl.&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                        &lt;p&gt;Unli Internet - inkl.&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                        &lt;p&gt;Max Speed - 500 MB&lt;/p&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="tarif-desc"&gt;
                &lt;div class="tariff-data"&gt;
                  &lt;p&gt;One Connection Fee: € 10&lt;/p&gt;
                  &lt;p&gt;Basic Fee: € 24&lt;/p&gt;
                  &lt;div&gt;&lt;a style="color:blue;" href="details.php?item_id=5&amp;amp;attribute_id=40&amp;amp;tariff_id=46&amp;amp;col=37"&gt;Select Tariff&lt;/a&gt;&lt;/div&gt;
                &lt;/div&gt;
  
  
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;input type="radio" name="company-tab" id="tab-30" checked=""&gt;
          &lt;label for="tab-30"&gt;Section 2&lt;/label&gt;
          &lt;div class="tab-content"&gt;
            &lt;div class="promo-content"&gt;
              &lt;div class="logo"&gt;&lt;/div&gt;
              &lt;div class="promo-desc"&gt;
                &lt;div id="Giga Combi Plus" class="promo-header-section"&gt;
                  &lt;div class="promo-header"&gt;
                    &lt;h4&gt;Giga Combi Plus x&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="services-included-section"&gt;
                    &lt;div class="services"&gt;
                      &lt;h4&gt;Services&lt;/h4&gt;
                      &lt;div&gt;
                        &lt;p&gt;EU Roaming - inkl.&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                        &lt;p&gt;Unli Internet - inkl.&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                        &lt;p&gt;Max Speed - 500 MB&lt;/p&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="tarif-desc"&gt;
                &lt;div class="tariff-data"&gt;
                  &lt;p&gt;One Connection Fee: € 10&lt;/p&gt;
                  &lt;p&gt;Basic Fee: € 24&lt;/p&gt;
                  &lt;div&gt;&lt;a style="color:blue;" href="details.php?item_id=5&amp;amp;attribute_id=40&amp;amp;tariff_id=46&amp;amp;col=37"&gt;Select Tariff&lt;/a&gt;&lt;/div&gt;
                &lt;/div&gt;
  
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="promo-content"&gt;
              &lt;div class="logo"&gt;&lt;/div&gt;
              &lt;div class="promo-desc"&gt;
                &lt;div id="Giga Combo Max" class="promo-header-section"&gt;
                  &lt;div class="promo-header"&gt;
                    &lt;h4&gt;Giga Combo Max x&lt;/h4&gt;
                    &lt;p&gt;Awesome&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="services-included-section"&gt;
                    &lt;div class="services"&gt;
                      &lt;h4&gt;Services&lt;/h4&gt;
                      &lt;div&gt;
                        &lt;p&gt;EU Roaming - inkl.&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                        &lt;p&gt;Unli Internet - inkl.&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                        &lt;p&gt;Unli SMS - inkl.&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                        &lt;p&gt;Unli Speed - inkl.&lt;/p&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="tarif-desc"&gt;
                &lt;div class="tariff-data"&gt;
                  &lt;p&gt;One Connection Fee: € 9&lt;/p&gt;
                  &lt;p&gt;Basic Fee: € 19&lt;/p&gt;
                  &lt;div&gt;&lt;a style="color:blue;" href="details.php?item_id=5&amp;amp;attribute_id=40&amp;amp;tariff_id=43&amp;amp;col=37"&gt;Select Tariff&lt;/a&gt;&lt;/div&gt;
                &lt;/div&gt;
  
              &lt;/div&gt;
            &lt;/div&gt;
  
  
            &lt;div class="promo-content"&gt;
              &lt;div class="logo"&gt;&lt;/div&gt;
              &lt;div class="promo-desc"&gt;
                &lt;div id="Giga Combi Plus" class="promo-header-section"&gt;
                  &lt;div class="promo-header"&gt;
                    &lt;h4&gt;Giga Combi Plus y&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="services-included-section"&gt;
                    &lt;div class="services"&gt;
                      &lt;h4&gt;Services&lt;/h4&gt;
                      &lt;div&gt;
                        &lt;p&gt;EU Roaming - inkl.&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                        &lt;p&gt;Unli Internet - inkl.&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                        &lt;p&gt;Max Speed - 500 MB&lt;/p&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="tarif-desc"&gt;
                &lt;div class="tariff-data"&gt;
                  &lt;p&gt;One Connection Fee: € 10&lt;/p&gt;
                  &lt;p&gt;Basic Fee: € 24&lt;/p&gt;
                  &lt;div&gt;&lt;a style="color:blue;" href="details.php?item_id=5&amp;amp;attribute_id=40&amp;amp;tariff_id=46&amp;amp;col=37"&gt;Select Tariff&lt;/a&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div id="item-desc"&gt;
      &lt;div id="desc-contents"&gt;
  
        &lt;h4&gt;Sample Overview&lt;/h4&gt;
        &lt;p&gt;This is samsung galaxy s9. It has a very nice camera. Its picture quality is very nice. You can try it.&lt;/p&gt;
        &lt;p&gt;It is 18 Mega pixel. And i play a very high graphic game that my laptop cannot play. Its very awesome and you must buy it. This is awesome phone and you would love it. It has maybe 2 days of battery life and you will be very excited about it. Just
          buy it please. Oh come on! Buy IT!!!!&lt;/p&gt;
        &lt;p&gt;That's it i cant bear any more. I am ordering you now to BUY IT! I will Hunt you with this Handy! I will show you chaos. &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>