Problem beim vertikalen Zentrieren mit der Flexbox, wenn die Höhen unbekannt sind

Question 1

Mein Layout hat einen Container flex-containerund ein Kind.

HTML:

<div class="flex-container">
  <div>text</div>
</div>

Der Behälter und das Kind haben eine unbekannte Höhe . Und das Ziel ist:

Wenn das Kind eine geringere Höhe als der Behälter hat, erscheint es horizontal und vertikal zentriert.
Wenn das Kind eine größere Höhe als der Container hat, passt es sich oben und unten an und wir können scrollen.

Planen: Geben Sie hier die Bildbeschreibung ein

Der schnellste Weg zum Zentrieren eines Elements mit Flexbox ist der folgende:

Code-Snippet anzeigen

.flex-container
{
  display: flex;
  align-items: center; /* vertical */
  justify-content: center; /* horizontal */

  width: 100%;
  height: 300px; /* for example purposes */
  overflow-y: scroll;
  background: #2a4;
}

.flex-container > div
{
  background: #E77E23;
  width: 400px;
}

<div class="flex-container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>

Erweitern Sie das Snippet

Codepen: http://www.codepen.io/ces/pen/slicw

Wenn das Kind des Containers jedoch eine größere Höhe hat, wird das Kind nicht richtig angezeigt. Das Kind erscheint geschnitten (nur der obere Teil).

Code-Snippet anzeigen

html,body
{
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.flex-container
{
  display: flex;
  align-items: center; // vertical
  justify-content: center; // horizontal
  
  width: 100%;
  height: 100px;
  overflow-y: scroll;
  background: #2a4;
}

.flex-container > div
{
  background: #E77E23;
  width: 400px;
}

<div class="flex-container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>

Erweitern Sie das Snippet

Codepen: http://www.codepen.io/ces/pen/sGtfK

Planen:

Geben Sie hier die Bildbeschreibung ein

Gibt es eine Möglichkeit, dieses Problem zu beheben?

Question 2

Ich habe die Lösung gefunden:

.flex-container {
    display: flex; /* only */
    overflow-y: scroll;
}

.flex-container > div {
    margin: auto; /* horizontal and vertical align */
}

Code-Snippet anzeigen

html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

.flex-container {
    display: flex;
    width: 100%;
    height: 100px; /* change height to 300px */
    overflow-y: scroll;
    background: #2a4;
}

.flex-container > div {
    padding: 1em 1.5em;
    margin: auto;
    background: #E77E23;
    width: 400px;
}

<div class="flex-container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>

Erweitern Sie das Snippet

Codepen: http://codepen.io/ces/pen/Idklh

Question 3

Add align-self:flex-start;to .flex-container > divkann auch dieses Problem beheben.

Siehe: http://www.w3.org/TR/css-flexbox-1/#auto-margins