Html Can'；t滚动到溢出容器的弹性项的顶部

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

我想解决的问题有两个方面。首先，使模态窗口垂直居中，这将按预期工作。第二个是让模式窗口滚动——从外部滚动，这样整个模式窗口滚动，而不是其中的内容（这样你就可以有下拉列表和其他UI元素，它们可以扩展到模式的边界之外——比如自定义日期选择器等等）

但是，当将垂直居中与滚动条组合时，模态的顶部可能无法访问，因为它开始溢出。在上面的示例中，可以调整大小以强制溢出，这样可以滚动到模式的底部，但不能滚动到顶部（第一段被截断）

下面是示例代码的链接（高度简化）

这将影响（当前）Firefox、Safari、Chrome和Opera。。有趣的是，如果您在IE10供应商前缀css中进行评论，它在IE10中的行为是正确的——我还没有在IE11中进行测试，但假设该行为与IE10的行为相匹配

---

任何想法都是好的。链接到已知的问题，或者这种行为背后的推理也会很有用。

好吧，正如墨菲定律所说，我在发布这个问题后所做的阅读产生了一些结果——虽然没有完全解决，但还是有些有用

在发布之前，我对最小高度进行了一些研究，但没有意识到规范中的固有大小限制

将

min height:min content

添加到flexbox区域确实解决了Chrome中的问题，并且使用供应商前缀也修复了Opera和Safari，尽管Firefox仍未解决

min-height: -moz-min-content; // not implemented
min-height: -webkit-min-content // works for opera and safari
min-height: min-content // works for chrome

仍在寻找有关Firefox和其他潜在解决方案的想法。

问题 Flexbox使定心非常容易

通过简单地将

align items:center

和

justify content:center

应用到flex容器，您的flex项目将垂直和水平居中

但是，当flex项大于flex容器时，此方法存在问题

如问题中所述，当flex项溢出容器时，顶部将无法访问

对于水平溢出，左侧部分变得不可访问（或者在RTL语言中为右侧部分）

下面是一个LTR容器的示例，其中包含

justify content:center

和三个flex项：

有关此行为的解释，请参见此答案的底部

---

解决方案#1 要解决此问题，请使用，而不是

justify content

使用

auto

margins，溢出的flex项目可以垂直和水平居中，而不会失去对其任何部分的访问

因此，与flex容器上的代码不同：

#flex-container {
    align-items: center;
    justify-content: center;
}

在flex项目上使用以下代码：

.flex-item {
    margin: auto;
}

---

解决方案#2（大多数浏览器尚未实现） 将

safe

值添加到关键字对齐规则中，如下所示：

justify-content: safe center

或

从：

当[flex item]大于[flex container]时，它将 溢流在这种情况下，如果采用某些对齐模式，则可能 导致数据丢失：例如，如果侧边栏的内容 居中，当它们溢出时，它们可能会将部分盒子送过去 视口的开始边缘，无法滚动到该边缘

为了控制这种情况，可以使用溢出对齐模式 明确指定<代码>不安全对齐符合指定的 溢出情况下的对齐模式，即使会导致数据丢失， 而

safe

alignment会在溢出模式下更改对齐模式 试图避免数据丢失的情况

默认行为是将对齐主题包含在 可滚动区域，但在编写本安全功能时 尚未实施

安全

如果[flex item]的大小溢出[flex container]，则 [flex item]的对齐方式与对齐模式相同 [

flex start

]

不安全

不考虑[flex item]和[flex item]的相对大小 容器]，将遵循给定的对齐值

注意：长方体对齐模块用于多个长方体布局模型，而不仅仅是flex。因此，在上面的规范摘录中，括号中的术语实际上是“对齐主题”、“对齐容器”和“

start

”。我使用特定于flex的术语来关注这个特定的问题

---

来自MDN的滚动限制说明：

Flexbox的对齐属性与其他对齐属性不同，它可以“真实”居中 CSS中的定心方法。这意味着弹性项目将保持不变 居中，即使它们溢出flex容器

然而，如果它们溢出到容器之外，这有时会有问题 页面的上边缘或左边缘[…]，如图所示 你不能滚动到那个区域，即使那里有内容

在将来的版本中，路线特性将扩展为 还有一个“安全”的选择

现在，如果这是一个问题，你可以用利润来实现 居中，因为他们将以“安全”的方式响应，并在以下情况下停止居中 它们溢出

不要使用

align-

属性，只需打开

auto

页边距即可 要居中放置的弹性项

将自动边距置于外部，而不是

justify-

属性 flex容器中第一个和最后一个flex项的边缘

auto

页边距将“灵活”并假定剩余空间， 分

justify-content: safe center

align-self: safe center

.rule
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: safe center;
}

.root {
  display: flex;
  justify-content: center;
  align-items: center;
}

.scroll-container {
  margin: auto;
  max-height: 100%;
  overflow: auto;
}

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<div class="root">
  <div class="scroll-container">
    <div class="flex-container">
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
</div>

<div class="modal-container">
  <div class="modal">
    <div class="content-container">
       <div class="content">
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
      </div>
  </div>  
</div>

.modal-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: black;
}

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #aaa;
  height: 80%;
  width: 90%;
}

.content-container {
  background-color: blue;
  max-height: 100%;
  overflow: auto;
  padding:0;
}

.content {
  display: flex;
  background-color: red;
  padding: 5px;
  width: 900px;
  height: 300px;
}