Vertical alignment with a flexible model with automatic overflow

Question

The flexible box model makes it incredibly easy for vertical alignment. The problem that I constantly encounter is that when you resize the viewport to "too small" size, the inner box will overflow at the top, despite the element located in the overflow: auto element. In other words, you can scroll to the bottom (as expected using overflow: auto ), but that doesn't work the other way around.

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

Now I understand why this happens in different ways, but I have no idea how best to solve it. How can you align something in the center with a flexible box model, but let the element overflow if it doesn't fit ?

Answer 1

this could be an option: 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; } 

and markup:

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

Answer 2

So, it turns out that it was a duplicate of Overflow: auto causes the vertically centered elements to be cut off using Flexbox (as cimmamon found in the chat itself), however, since this question picks up a different angle (versions from version 2009 to 2012 flexbox), I don’t I’m going to self-identify this question as a duplicate.

Indication of a related answer:

The beauty of flexbox is that it offers many different ways to achieve a specific layout. One of the underestimated flexbox features is that the auto value for the top and bottom margins really does what it sounds, and its just what you need here instead of justifying the content / alignment of the elements.

So we just get:

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

Answer 3

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

I'm not sure what you want ???