無法滾動到溢出容器的flex項目的頂部的標題重寫為：無法將溢出容器中的flex項目滾動至頂部

Question

<p>在嘗試使用flexbox創建一個有用的模態框時，我發現了一個似乎是瀏覽器問題的情況，並想知道是否有已知的修復方法或解決方法- 或者對如何解決它有什麼想法。 </p> <p>我試圖解決的問題有兩個面向。首先，垂直居中模態窗口，這個功能如預期般運作。第二個是讓模態視窗滾動- 外部滾動，所以整個模態視窗滾動，而不是其中的內容（這樣你可以有下拉式選單和其他可以超出模態框範圍的UI元素- 如自訂日期選擇器等）。 </p> <p>然而，當將垂直居中與捲軸結合使用時，模態框的頂部可能變得無法訪問，因為它開始溢出。在上面的範例中，您可以調整大小以強制溢出，在這樣做時，它允許您滾動到模態框的底部，但無法滾動到頂部（第一段被截斷）。</p> <p><br />></p>

.modal-container {
  位置：固定；
  頂部：0；
  左：0；
  底部：0；
  右：0；
  背景：rgba(0,0,0,0.5);
  溢出-x：自動；
}
.modal-container .modal-window {
  顯示：-ms-flexbox；
  顯示：柔性；
  彎曲方向：列；
  對齊項目：居中；
  調整內容：居中；
  /* 確認滾動行為的可選支援在 IE10 中有意義
  //-ms-flex-方向：列；
  //-ms-flex-align: 中心;
  //-ms-flex-pack: 中心; */
  高度：100%；
}
.modal-container .modal-window .modal-content {
  邊框：1px實心#ccc；
  邊框半徑：4px；
  背景：#fff；
  寬度：100%；
  最大寬度：500px；
  內邊距：10 像素
}</前>
<pre class="brush:html;toolbar:false;"><div class="modal-container">
    <div class="modal-window">
        <div class="modal-content">
            <p class="p3">Lorem Ipsum 是印刷和排版產業的簡單虛擬文字。自 1500 年代以來，Lorem Ipsum 一直是行業標準的虛擬文本，當時一位不知名的印刷商拿走了一堆字體並將其打亂以製作一本字體樣本簿。它不僅經歷了五個世紀的考驗，而且跨越了電子排版的時代，基本上保持不變。它在 20 世紀 60 年代隨著包含 Lorem Ipsum 段落的 Letraset 表的發布而流行起來，最近又隨著包含 Lorem Ipsum 版本的 Aldus PageMaker 等桌面出版軟體而流行。
            <p class="p3">Lorem Ipsum 是印刷和排版產業的簡單虛擬文字。自 1500 年代以來，Lorem Ipsum 一直是行業標準的虛擬文本，當時一位不知名的印刷商拿走了一堆字體並將其打亂以製作一本字體樣本簿。它不僅經歷了五個世紀的考驗，而且跨越了電子排版的時代，基本上保持不變。它在 20 世紀 60 年代隨著包含 Lorem Ipsum 段落的 Letraset 表的發布而流行起來，最近又隨著包含 Lorem Ipsum 版本的 Aldus PageMaker 等桌面出版軟體而流行。
            <p class="p3">Lorem Ipsum 是印刷和排版產業的簡單虛擬文字。自 1500 年代以來，Lorem Ipsum 一直是行業標準的虛擬文本，當時一位不知名的印刷商拿走了一堆字體並將其打亂以製作一本字體樣本簿。它不僅經歷了五個世紀的考驗，而且跨越了電子排版的時代，基本上保持不變。它在 20 世紀 60 年代隨著包含 Lorem Ipsum 段落的 Letraset 表的發布而流行起來，最近又隨著包含 Lorem Ipsum 版本的 Aldus PageMaker 等桌面出版軟體而流行。
        

Answer 1

我只用了3個容器就實現了這個效果。訣竅是將flexbox容器與控制滾動的容器分開。最後，將所有內容放入根容器以居中顯示。以下是創建效果所需的關鍵樣式：

.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>

我在這裡創建了一個示範：https://jsfiddle.net/r5jxtgba/14/

Answer 2

問題

Flexbox讓居中變得非常容易。

只需將align-items: center和justify-content: center應用於flex容器，您的flex專案將垂直和水平居中。

然而，當flex專案大於flex容器時，這種方法存在一個問題。

如問題中所指出的，當flex專案溢出容器時，頂部變得無法存取。

對於水平溢出，左側部分變得無法存取（或在RTL語言中為右側部分）。

下面是一個LTR容器的範例，其中包含justify-content: center和三個flex專案：

有關此行為的說明，請參閱本答案底部。

---

解決方案＃1

為了解決這個問題，請使用flexbox自動邊距，而不是justify-content。

使用auto邊距，溢出的flex專案可以在垂直和水平方向上居中，而不會失去對其任何部分的存取。

所以，不要在flex容器上使用這段程式碼：

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

在flex專案上使用這段程式碼：

.flex-item {
    margin: auto;
}

修訂示範

---

解決方案＃2（大多數瀏覽器尚未實現）

將safe值新增到您的關鍵字對齊規則中，如下所示：

justify-content: safe center

或

align-self: safe center

來自CSS Box Alignment模組規範：

注意：Box Alignment模組適用於多個盒子佈局模型，而不僅僅是flex。因此，在上述規範摘錄中，方括號中的術語實際上是「對齊主體」、「對齊容器」和「start」。我使用了特定於flex的術語，以保持對這個特定問題的關注。

---

來自MDN的滾動限制說明：