如何使用flexbox安全中心？

Question

当中心的flexbox项目溢出其容器时,它们可能会产生不良行为.

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

如果项目的大小溢出对齐容器,则项目将对齐,就像对齐模式开始一样.

它可以如下使用.

align-items: safe center;

不幸的是,我无法找到任何关于此的示例或讨论,或者确定它有多少浏览器支持.

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

如果有人能够阐明safe它是否可以用于解决溢出问题,我会非常感激,如CodePen示例所示.

Answer 1

该safe关键字仍然是一个工作草案,并没有很多(如果有的话)浏览器支持它,所以为了获得相同的效果,跨浏览器,现在使用自动边距,应该在flex项目上设置.

更新了codepen

请注意,以补偿modal的50px的顶部/底部边缘,使用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;
}