如何在Flexbox中使用安全中心？

Question

当居中的flexbox项溢出其容器时，它们可能具有不良行为。

已经针对此问题提供了几种非灵活的解决方案，但是根据MDN，存在一个safe如下所述的值。

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

可以如下使用。

align-items: safe center;

不幸的是，我无法找到任何示例或讨论，也无法确定浏览器对此有多少支持。

我试图safe在此CodePen中使用。但是，它对我不起作用。本safe似乎被忽略，或者容器元素是不正确的风格。

safe如CodePen示例所示，如果有人可以阐明它以及是否以及如何用于解决溢出问题，我将非常感激。

Answer 1

safe关键字仍然是有效的草稿，并且还没有很多（如果有的话）浏览器支持该关键字，因此要获得相同的效果，请跨浏览器暂时使用[自动边距]，该边距应在flex项目上设置。

请注意，要补偿modal50px的上下边界，请padding在上使用modal-container。

.modal-container
{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;                /*  changed  */
  position: fixed;
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  padding: 50px 0;                        /*  added  */
  box-sizing: border-box;                 /*  added  */
}
.modal-container > #modal
{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto 0;                         /*  changed  */
  padding: 12px;
  width: 50%;
  background-color: #333;
  cursor: pointer;
}