Safari通过滚动div切断弹出窗口的底部背景

Question

下图显示了一个包含3个部分的弹出式叠加层。顶部，滚动内容和底部。

问题：Safari以某种方式过早切断了底部。

This Stackblitz也会复制它。

到目前为止，我已经弄清楚，这可能与滚动区域的大小有关。如果我删除了一部分文字，问题就消失了。

不幸的是，我目前无法访问Mac，因此无法在开发人员工具中“检查”浏览器。所以我希望有人可以对此有所启发。

Answer 1

我设法访问Mac，结果发现这个问题很琐碎，并且与Safari对flex的解释有关。

我必须将按钮“行”父框包装在另一个div中：

之前：

<ngx-smart-modal #termsModal1 [identifier]="'termsModal1'" customClass="nsm-centered">
  <div class="main-container">
    <div class="nsm-body content-wrapper mt-5">
      <div class="overflow-container">
        <div class="pl-3 pr-3">
          <h3>Terms and conditions</h3>
          <ed-terms></ed-terms>
        </div>
      </div>
      <div class="clearfix"></div>
      <!-- RELEVANT PART -->
      <div class="row m-0 pb-4 pl-3 pr-3 clearfix">
        <div class="btn btn-primary btn-block col-12 mt-3" (click)="termsModal1.close()">I ACCEPT THE TERMS</div>
        <div class="btn btn-info btn-block col-12" (click)="termsModal1.close()" i18n>CLOSE</div>
      </div>
    <!-- /RELEVANT PART -->
    </div>
  </div>
</ngx-smart-modal>

之后：

我也删除了所有我无奈添加的'clearfix'内容；-）

<ngx-smart-modal #termsModal2 [identifier]="'termsModal2'" customClass="nsm-centered">
  <div class="main-container">
    <div class="nsm-body content-wrapper mt-5">
      <div class="overflow-container">
        <div class="pl-3 pr-3">
          <h3>Terms and conditions</h3>
          <ed-terms></ed-terms>
        </div>
      </div>
      <!-- RELEVANT PART -->
      <div>
        <div class="row m-0 pb-4 pl-3 pr-3">
          <div class="btn btn-primary btn-block col-12 mt-3" (click)="termsModal2.close()">I ACCEPT THE TERMS</div>
          <div class="btn btn-info btn-block col-12" (click)="termsModal2.close()" i18n>CLOSE</div>
        </div>
      </div>
      <!-- /RELEVANT PART -->
    </div>
  </div>
</ngx-smart-modal>

[The stackblitz code已相应更新，以反映两种情况。