模态元素从屏幕上方碰撞时不会向下滚动

Question

因此，我有一个模态元素，当由用户生成的数据填充时，它会垂直变大以适合屏幕。设置“ overflow-y：auto”后，我可以向下滚动查看内容而不会出现问题，但是如果我垂直调整窗口大小，并且将模态从屏幕顶部推出，则无法向下滚动，这样它的顶部是可见的。这似乎应该是一个简单的修复程序，但是对于我的一生来说，这种修复程序使我难以为继。

这是我的应用程序SASS文件中的代码：

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  background-color: rgba($black, 0.9);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding-top: 10%;

  &-container {
    margin-top: 10%;
    position: relative;
    width: 40%;
    background-color: $light-color;
    color: $white;
  }

  &-content {
    padding: 5rem;
  }

  &-p-heading {
    margin-bottom: 0.5rem;
  }

  &-paragraph {
    margin-bottom: 2rem;
  }

  &-image-gallery {
    width: 100%;
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
  }

  &-image {
    height: 7rem;
    width: 10rem;
    margin: 1rem;
    transition: all .25s;

    &-large {
      width: 90%;
      height: 60%;
    }

    &:hover {
      transform: scale(1.25);
      z-index: 1000;
    }
  }

  &-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    transition: all 0.25s;

    &:hover {
      transform: scale(1.5);
      opacity: 1;
    }
  }
}

这是我制作的复制行为的代码笔的链接：

https://codepen.io/jonas-matlock/pen/abOVYwd

再次，要查看我要解决的问题，请从下至上垂直缩小窗口，以使模态的顶部不可见...

Answer 1

我所做的只是将margin-top: 10%更改为margin: auto

Answer 2

这是由center属性的align-items的应用引起的。根据CSS弹性盒布局模块级别1，

center ^ref

弹性项目的边距框位于线内交叉轴的中心。 （如果伸缩线的交叉尺寸小于伸缩项目的交叉尺寸，它将在两个方向上均等地溢出。）

因此，您可以使用safe关键字，

安全^ref

如果对齐对象的大小溢出对齐容器，则对齐对象将对齐，就好像对齐模式已开始一样。

.modal {
  display: flex;
  justify-content: center;
  align-items: safe center; /* ADD safe keyword */
  overflow-y: auto;
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.modal-container {
  position: relative;
  display: flex;
  justify-content: center;
  width: 40%;
  background-color: white;
  color: black;
}

<div class="modal">
  <div class="modal-container">
    <div class="modal-content">
      <h1>I am modal</h1>
      <p>I am modal content</p>
      <p>I am modal content</p>
      <p>I am modal content</p>
      <p>I am modal content</p>
      <p>I am modal content</p>
      <p>I am modal content</p>
    </div>
  </div>
</div>

或使用自动边距代替justify-content，align-items属性。

.modal {
  display: flex;
  overflow-y: auto;
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.modal-container {
  position: relative;
  display: flex;
  justify-content: center;
  width: 40%;
  background-color: white;
  color: black;
  margin: auto; /* ADD */
}

<div class="modal">
  <div class="modal-container">
    <div class="modal-content">
      <h1>I am modal</h1>
      <p>I am modal content</p>
      <p>I am modal content</p>
      <p>I am modal content</p>
      <p>I am modal content</p>
      <p>I am modal content</p>
      <p>I am modal content</p>
    </div>
  </div>
</div>

请注意，只有Firefox当前支持safe关键字（caniuse）。