如何使父元素的高度与绝对定位的子元素一起扩展？

Question

我有一个.main_wrapper类的页面，其中包含ID为#tariff-section和#item-desc的两个子div。 #tariff-section包含.tabs，其中包含.tab-content元素，信息从元素中流出并覆盖#item-desc的内容。这就是问题所在。我观察到#tariff-section的高度并未扩展，而.tab-content中的#tariff-section元素具有position:absolute;并因此溢出并覆盖了#item-desc。 有没有一种方法可以防止此绝对元素的覆盖#item-desc jsfiddle是：

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

代码如下：

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>