How to make a parent element's height expand with the absolute positioned child element?

Question

I have a page with .main_wrapper class which contains two child div of id #tariff-section and #item-desc. The #tariff-section contains .tabs which contains .tab-content element with information that flows out of it and covers the #item-desc contents. And that is the problem. I observed that the #tariff-section doesn't expand in its height while the .tab-content elements in the #tariff-section has position:absolute; and thus overflow and covers the #item-desc. Is there a way to prevent the cover of this absolute element from #item-desc The jsfiddle is:

https://jsfiddle.net/zuheab/xz6d3tp5/6/

And the code is given below:

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>input {
  display: none;
}

.tabs li>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>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>input:checked+label {
  background: white;
  box-shadow: 1px 0px 1px #ddd;
}

.tabs li>input:checked~.tab-content {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}


/* promo - content*/

.tabs li>input:checked~.tab-content>.promo-content {
  display: grid;
  grid-template-columns: 10% 55% 35%;
  height: 200px;
  background: #fff;
  padding: 20px;
  box-shadow: 1px 0px 1px #ddd;
}

.tabs li>input:checked~.tab-content>.promo-content>.promo-desc>.promo-header-section {
  display: grid;
  grid-template-columns: 50% 50%;
}

.tabs li>input:checked~.tab-content>.promo-content>.promo-desc>.services-included-section {
  display: grid;
  grid-template-columns: 60% 40%;
}

.tabs li>input:checked~.tab-content>.promo-content>.promo-desc>.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;
}

<div class="main_wrapper">


  <div id="tariff-section">
    <ul class="tabs">
      <li>
        <input type="radio" name="company-tab" id="tab-29" checked="">
        <label for="tab-29">SECTION 1</label>
        <div class="tab-content">
          <div class="promo-content">
            <div class="logo"></div>
            <div class="promo-desc">
              <div id="Giga Combi Plus" class="promo-header-section">
                <div class="promo-header">
                  <h4>Giga Combi Plus a</h4>
                </div>
                <div class="services-included-section">
                  <div class="services">
                    <h4>Services</h4>
                    <div>
                      <p>EU Roaming - inkl.</p>
                    </div>
                    <div>
                      <p>Unli Internet - inkl.</p>
                    </div>
                    <div>
                      <p>Max Speed - 500 MB</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tarif-desc">
              <div class="tariff-data">
                <p>One Connection Fee: € 10</p>
                <p>Basic Fee: € 24</p>
                <div>
                  <a style="color:blue;" href="details.php?item_id=5&amp;attribute_id=40&amp;tariff_id=46&amp;col=37">Select Tariff</a>
                </div>
              </div>

            </div>
          </div>

          <div class="promo-content">
            <div class="logo"></div>
            <div class="promo-desc">
              <div id="Giga Combo Max" class="promo-header-section">
                <div class="promo-header">
                  <h4>Giga Combo Max a</h4>
                  <p>Awesome</p>
                </div>
                <div class="services-included-section">
                  <div class="services">
                    <h4>Services</h4>
                    <div>
                      <p>EU Roaming - inkl.</p>
                    </div>
                    <div>
                      <p>Unli Internet - inkl.</p>
                    </div>
                    <div>
                      <p>Unli SMS - inkl.</p>
                    </div>
                    <div>
                      <p>Unli Speed - inkl.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tarif-desc">
              <div class="tariff-data">
                <p>One Connection Fee: € 9</p>
                <p>Basic Fee: € 19</p>
                <div><a style="color:blue;" href="details.php?item_id=5&amp;attribute_id=40&amp;tariff_id=43&amp;col=37">Select Tariff</a></div>
              </div>

            </div>
          </div>


          <div class="promo-content">
            <div class="logo"></div>
            <div class="promo-desc">
              <div id="Giga Combi Plus" class="promo-header-section">
                <div class="promo-header">
                  <h4>Giga Combi Plus b</h4>
                </div>
                <div class="services-included-section">
                  <div class="services">
                    <h4>Services</h4>
                    <div>
                      <p>EU Roaming - inkl.</p>
                    </div>
                    <div>
                      <p>Unli Internet - inkl.</p>
                    </div>
                    <div>
                      <p>Max Speed - 500 MB</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tarif-desc">
              <div class="tariff-data">
                <p>One Connection Fee: € 10</p>
                <p>Basic Fee: € 24</p>
                <div><a style="color:blue;" href="details.php?item_id=5&amp;attribute_id=40&amp;tariff_id=46&amp;col=37">Select Tariff</a></div>
              </div>
            </div>
          </div>
          <div class="promo-content">
            <div class="logo"></div>
            <div class="promo-desc">
              <div id="Giga Combi Plus" class="promo-header-section">
                <div class="promo-header">
                  <h4>Giga Combi Plus c</h4>
                </div>
                <div class="services-included-section">
                  <div class="services">
                    <h4>Services</h4>
                    <div>
                      <p>EU Roaming - inkl.</p>
                    </div>
                    <div>
                      <p>Unli Internet - inkl.</p>
                    </div>
                    <div>
                      <p>Max Speed - 500 MB</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tarif-desc">
              <div class="tariff-data">
                <p>One Connection Fee: € 10</p>
                <p>Basic Fee: € 24</p>
                <div><a style="color:blue;" href="details.php?item_id=5&amp;attribute_id=40&amp;tariff_id=46&amp;col=37">Select Tariff</a></div>
              </div>


            </div>
          </div>
        </div>
      </li>
      <li>
        <input type="radio" name="company-tab" id="tab-30" checked="">
        <label for="tab-30">Section 2</label>
        <div class="tab-content">
          <div class="promo-content">
            <div class="logo"></div>
            <div class="promo-desc">
              <div id="Giga Combi Plus" class="promo-header-section">
                <div class="promo-header">
                  <h4>Giga Combi Plus x</h4>
                </div>
                <div class="services-included-section">
                  <div class="services">
                    <h4>Services</h4>
                    <div>
                      <p>EU Roaming - inkl.</p>
                    </div>
                    <div>
                      <p>Unli Internet - inkl.</p>
                    </div>
                    <div>
                      <p>Max Speed - 500 MB</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tarif-desc">
              <div class="tariff-data">
                <p>One Connection Fee: € 10</p>
                <p>Basic Fee: € 24</p>
                <div><a style="color:blue;" href="details.php?item_id=5&amp;attribute_id=40&amp;tariff_id=46&amp;col=37">Select Tariff</a></div>
              </div>

            </div>
          </div>

          <div class="promo-content">
            <div class="logo"></div>
            <div class="promo-desc">
              <div id="Giga Combo Max" class="promo-header-section">
                <div class="promo-header">
                  <h4>Giga Combo Max x</h4>
                  <p>Awesome</p>
                </div>
                <div class="services-included-section">
                  <div class="services">
                    <h4>Services</h4>
                    <div>
                      <p>EU Roaming - inkl.</p>
                    </div>
                    <div>
                      <p>Unli Internet - inkl.</p>
                    </div>
                    <div>
                      <p>Unli SMS - inkl.</p>
                    </div>
                    <div>
                      <p>Unli Speed - inkl.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tarif-desc">
              <div class="tariff-data">
                <p>One Connection Fee: € 9</p>
                <p>Basic Fee: € 19</p>
                <div><a style="color:blue;" href="details.php?item_id=5&amp;attribute_id=40&amp;tariff_id=43&amp;col=37">Select Tariff</a></div>
              </div>

            </div>
          </div>


          <div class="promo-content">
            <div class="logo"></div>
            <div class="promo-desc">
              <div id="Giga Combi Plus" class="promo-header-section">
                <div class="promo-header">
                  <h4>Giga Combi Plus y</h4>
                </div>
                <div class="services-included-section">
                  <div class="services">
                    <h4>Services</h4>
                    <div>
                      <p>EU Roaming - inkl.</p>
                    </div>
                    <div>
                      <p>Unli Internet - inkl.</p>
                    </div>
                    <div>
                      <p>Max Speed - 500 MB</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tarif-desc">
              <div class="tariff-data">
                <p>One Connection Fee: € 10</p>
                <p>Basic Fee: € 24</p>
                <div><a style="color:blue;" href="details.php?item_id=5&amp;attribute_id=40&amp;tariff_id=46&amp;col=37">Select Tariff</a></div>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
  <div id="item-desc">
    <div id="desc-contents">

      <h4>Sample Overview</h4>
      <p>This is samsung galaxy s9. It has a very nice camera. Its picture quality is very nice. You can try it.</p>
      <p>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!!!!</p>
      <p>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. </p>
    </div>
  </div>

</div>

remove the fixed height and the div will grow - if you set a height, then it will not. If you want a min-height, then use min-height, not height — Pete, Aug 23 '19 at 08:18
i changed the question. its not the child element, its the nested child element or in other words child's child element. The child element has the same height as its parent has. but the child's child height is the thing that doesnt depends of its parent's parent height. — Zohaib, Aug 23 '19 at 08:25
you have to do it with JS https://stackoverflow.com/questions/12070759/make-absolute-positioned-div-expand-parent-div-height — Soothran, Aug 23 '19 at 08:58

How to make a parent element's height expand with the absolute positioned child element?

0 Answers0