父容器有溢出:auto，但当屏幕高度变化时，子高度仍然会改变

Question

我将父容器设置为overflow: auto; position: fixed; .它的直接子元素也是其他元素的容器。我将直接子级的高度设置为默认height: auto。当我降低视口高度时，父容器上没有滚动条，直接子元素开始缩小，孙元素消失了。有谁知道发生了什么以及如何解决它？如果解决方案不需要固定高度，那就太好了。

<div class="parent" style="overflow: auto; position: fixed;">
  <div class="children">
    <div class="grandchildren" style="height: 30px;">Div1</div>
    <div class="grandchildren" style="height: 30px;">Div 2</div>
    <div class="grandchildren" style="height: 30px;">Div 3</div>
    <div class="grandchildren" style="height: 30px;">Div 4</div>
  </div>
</div>

JSFiddle https://jsfiddle.net/j67shi/smag4e0u/11/上的代码片段

Answer 1

检查下面的代码片段。您需要为父div 设置高度

<div class="parent" style="overflow: auto; position: fixed;height:100%">
  <div class="children" style="overflow: hidden;">
    <div class="grandchildren">1</div>
    <div class="grandchildren">2</div>
    <div class="grandchildren">3</div>
    <div class="grandchildren">4</div>
    <div class="grandchildren">5</div>
    <div class="grandchildren">6</div>
    <div class="grandchildren">7</div>
    <div class="grandchildren">8</div>
    <div class="grandchildren">9</div>
    <div class="grandchildren">10</div>
    <div class="grandchildren">11</div>
    <div class="grandchildren">12</div>
    <div class="grandchildren">13</div>
    <div class="grandchildren">14</div>
    <div class="grandchildren">5</div>
    <div class="grandchildren">6</div>
    <div class="grandchildren">7</div>
    <div class="grandchildren">8</div>
    <div class="grandchildren">9</div>
    <div class="grandchildren">10</div>
    <div class="grandchildren">11</div>
    <div class="grandchildren">12</div>
    <div class="grandchildren">13</div>
    <div class="grandchildren">14</div>
  </div>
</div>