Wyrównanie w pionie z modelem flex z przepełnieniem auto

Question

Elastyczny model pudełkowy sprawia, że ​​niezwykle proste jest wyrównanie w pionie. Jednak ciągle napotykam problem polegający na tym, że gdy zmieniam rozmiar okna roboczego na "zbyt mały" rozmiar, pole wewnętrzne przepełni się na szczycie pomimo elementu znajdującego się w elemencie overflow: auto. Innymi słowy, nadal możesz przewijać do dołu (zgodnie z oczekiwaniami z overflow: auto), ale nie działa to w drugą stronę.

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

Teraz jakby się dlaczego tak się dzieje Spec-mądry, ale nie mam pojęcia, co jest najlepszym sposobem, aby rozwiązać ten problem. W jaki sposób można ustawić coś w środku za pomocą elastycznego modelu pudełka, ale niech przepełnienie elementu nie pasuje do?

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; 
} 

Nie jestem pewien, czy to chcesz ???

Answer 2

może to być opcja: 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; 
} 

i narzut:

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

Answer 3

Tak, okazuje się, że był to duplikat Overflow: auto causes vertically centered items to be cut off using Flexbox (jak stwierdzono przez cimmamon się na chacie), jednak ponieważ pytanie to ma inny punkt widzenia (wersje flexbox z 2009 i 2012 r.), nie będę samodzielnie zgłaszać tego pytania jako duplikatu.

Cytowanie połączoną odpowiedź:

Piękno schematu flexbox jest to, że oferuje wiele różnych sposobów, aby osiągnąć konkretny układ. Jedną z niedocenianych funkcji Flexboksa jest to, że wartość auto dla górnego i dolnego marginesu naprawdę robi to, co brzmi, i jest to właśnie to, czego potrzebujesz tutaj w miejsce elementów justify-contents/align.

Więc po prostu dostać:

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