Vertikale Ausrichtung mit Flex-Modell mit Überlauf Auto

Question

Das flexible Box-Modell macht es unglaublich einfach, Dinge vertikal auszurichten. Ein Problem, auf das ich immer wieder stoße, ist, dass, wenn ich das Ansichtsfenster auf eine "zu kleine" Größe skaliere, der innere Kasten oben trotz des Elements, das sich in einem overflow: auto Element befindet, überläuft. Mit anderen Worten, Sie können immer noch bis zum Ende scrollen (wie erwartet mit overflow: auto), aber es funktioniert nicht umgekehrt.

#con { 
 
    width: 300px; 
 
    height: 100px; 
 
    background: yellow; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    overflow: auto; 
 
} 
 
#center { 
 
    background: green; 
 
    color: white; 
 
}

<div id="con"> 
 
    <div id="center"> 
 
     Invisible<br/> 
 
     2<br/> 
 
     3<br/> 
 
     4<br/> 
 
     5<br/> 
 
     6<br/> 
 
     7<br/> 
 
     8<br/> 
 
     9<br/> 
 
     10 
 
    </div> 
 
</div>

Jetzt bekomme ich irgendwie, warum diese spec-weise geschieht, aber ich habe keine Ahnung, was der beste Weg, dies zu lösen ist. Wie kann Sie etwas in der Mitte mit dem flexiblen Box-Modell ausrichten, aber lassen Sie das Element überlaufen, wenn es nicht passt?

Answer 1

Fiddle

http://jsfiddle.net/s3bjkqj4/1/

CSS

#con { 
    width: 300px; 
    height: 100px; 
    background: yellow; 
display: inline-flex; 

    overflow: auto; 
} 
#center { 
    background: green; 
    color: white;  
    width:80px; 
    text-align:center; 
    margin:0 auto; 
} 

ich nicht sicher bin, ist dies Sie wollen ???

Answer 2

dies eine Option sein könnte: http://jsfiddle.net/jge6ppaz/

.concon 
{ 
    width:300px; 
    height:100px; 
    display:flex; 
    overflow: auto; 
    flex:0 0 auto; 
    flex-direction:column; 
    background: yellow; 
    justify-content:center; 
} 

.con { 
    display: flex; 
    flex:0 0 auto; 
    flex-direction:column; 
    max-height:100%; 
    box-shadow:inset 0 0 20px red; 
} 

.center { 
    background: green; 
    color: white; 
    flex:0 0 auto; 
    align-self:center; 
} 

und das Markup:

<div class="concon"> 
    <div class="con"> 
     <div class="center"> 
      contents here 
     </div> 
    </div> 
</div> 

Answer 3

So stellt sich heraus, das ein Duplikat Overflow: auto causes vertically centered items to be cut off using Flexbox war (wie durch cimmamon sich im Chat gefunden), aber Da diese Frage einen anderen Blickwinkel hat (2009 vs 2012 flexbox Versionen), werde ich diese Frage nicht als Duplikat kennzeichnen.

Zitiert die verknüpfte Antwort:

Die Schönheit der Flexbox ist, dass es viele verschiedene Möglichkeiten bietet, ein bestimmtes Layout zu erzielen. Eine der unterbewerteten Funktionen von Flexbox ist, dass der Wert von auto für den oberen und unteren Rand wirklich das tut, was es klingt, und genau das, was Sie hier anstelle von justify-contents/align-items benötigen.

Also dann bekommen wir einfach:

#con { 
 
    width: 300px; 
 
    height: 100px; 
 
    background: yellow; 
 
    display: flex; 
 
    overflow: auto; 
 
} 
 
#center { 
 
    background: green; 
 
    color: white; 
 
    margin: auto; 
 
}

<div id="con"> 
 
    <div id="center"> 
 
     Invisible<br/> 
 
     2<br/> 
 
     3<br/> 
 
     4<br/> 
 
     5<br/> 
 
     6<br/> 
 
     7<br/> 
 
     8<br/> 
 
     9<br/> 
 
     10 
 
    </div> 
 
</div>