Center responsive div with unknown height and enable full vertical scroll - css

Question

I'm trying to center a div with an unknown height.
I can't find a solution that allows scroll to the top of the div when the viewport height is less than the div height.
HTML
<div>
<p>This will be hidden when <br />
window_height < div_width</p>
<br />
<br />
<br />
How to make it scroll to the top?
</div>
CSS
body {
background: grey;
}
p{
background: green;
}
div {
position: absolute;
left: 50%;
top: 50%;
box-sizing: border-box;
transform: translate(-50%, -50%);
max-width: 500px;
width:100%;
height: 700px; /* Unknown*/
padding: 20px;
background: red;
color: white;
text-align: center;
}
http://codepen.io/Koopa/pen/GpypdX
Thanks

Answer 1

The reason you can't scroll to the top of the div is because the transform property with negative values positions the div off-screen on smaller screens.
In this demo transform is disabled:
http://codepen.io/anon/pen/wKpMyM
Also, when you apply absolute positioning to an element you take it out of the normal flow of the document. This means it is ignored by its container. Hence, the body and html element have zero height.
In this demo the body has a green border (which is totally collapsed):
http://codepen.io/anon/pen/RWxrod
To make your layout work, you can give the body a minimum height (so it can expand along with the div) and, instead of centering with absolute positioning, use a flexbox.
CSS
html { height: 100%; } /* necessary for percentage heights to work */
body {
background: grey;
border: 10px solid green; /* for demo purposes */
min-height: 100%; /* allow body to expand with children */
display: flex; /* establish flex container */
justify-content: center; /* center div horizontally, in this case */
align-items: center; /* center div vertically, in this case */
}
p {
background: green;
}
div {
/* REMOVE
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); */
box-sizing: border-box;
max-width: 500px;
width:100%;
height: 700px; /* Unknown*/
padding: 20px;
background: red;
color: white;
text-align: center;
}
DEMO: http://codepen.io/anon/pen/OyzMvV
Note that flexbox is supported by all major browsers, except IE 8 & 9.