为什么父级div没有达到预期的高度

Question

我已经实现了具有静态高度的模板。我已经更改了其内容高度以适合子高度，但父级<main>和父级<section>并未获得自动计算的高度。 为什么？ 我对这个问题发疯了。

HTML：

<section class="seccion-productos">
  <div id="sidebar">...</div>
  <div id="grid-selector">...</div>
  <div id="grid">...</div>
</section>
</main>
<footer>...</footer>

CSS：

#sidebar{
    float: none;
    height: auto;
    width: 22%;
    padding: 1% 0 0 2%;
}
.seccion-productos { 
    position: relative;
    width: 100%;
}
#grid-selector {
    width: 78%;
    position: absolute;
    top: 0;
    left: 22%;
    right: 0;
    display: flex;
    vertical-align: middle;
}
#grid {
    width: 78%;
    height: auto;
    top: 90px;
    left: 22%;
}

不良结果，父级内容不适合子级内容

我只是问什么事情可以使这种情况发生，我应该怎么做才能解决。或者，如果我缺少什么。还是我必须去的地方。

您还可以在此处查看完整的代码： https://randal-es.000webhostapp.com/php/paginas/productos.php

Answer 1

@Arngue，如@Johannes所说，如果您将子元素置于绝对位置，即使父元素具有相对位置，它也不会影响父元素。父母的相对位置影响的唯一事情是绝对定位的坐标原点。您需要更改#grid-selector的位置定义，否则它将始终破坏您的布局。

Answer 2

position: absolute;元素的#grid-selector将其移出父级的大小计算上下文。将其更改为relative