相关疑难解决方法(0)

因此,在尝试使用flexbox创建一个有用的模式时,我发现了什么似乎是一个浏览器问题,我想知道是否有一个已知的修复或解决方法 - 或者如何解决它的想法.

我想解决的问题有两个方面.首先,使模态窗口垂直居中,这可以按预期工作.第二个是让模态窗口滚动 - 外部,所以整个模态窗口滚动,而不是其中的内容(这样你就可以有下拉列表和其他可以扩展到模态边界之外的UI元素 - 像自定义日期选择器等)

但是,当将垂直居中与滚动条组合时,模态的顶部在开始溢出时可能无法进入.在上面的示例中,您可以调整大小以强制溢出,这样做可以让您滚动到模态的底部,但不能滚动到顶部(第一段被截断).

这是示例代码的链接(高度简化)

https://jsfiddle.net/dh9k18k0/2/

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  overflow-x: auto;
}
.modal-container .modal-window {
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // Optional support to confirm scroll behavior makes sense in IE10
  //-ms-flex-direction: column;
  //-ms-flex-align: center;
  //-ms-flex-pack: center;
  height: 100%;
}
.modal-container .modal-window .modal-content {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  width: 100%;
  max-width: 500px; …

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

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

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

它可以如下使用.

align-items: safe center;

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

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

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