I want to center an element within a parent. That's easy enough with transform, flexbox, grid and so on... The problem is the overflow-behavior. When the parent shrinks below the dimensions of the child, scrollbars appear. But they do not allow me to scroll to the top-left of the child. Here's what I mean: gif animation showing window-resizing and the css behavior
This example uses flexbox for it's centering, html below:
b {
color: white;
}
html {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
margin: 0;
}
header {
position: absolute;
top: 0;
height: 84px;
width: 100%;
background-color: darkolivegreen;
}
footer {
position: absolute;
bottom: 0;
height: 56px;
width: 100%;
background-color: darkslateblue;
}
main {
position: absolute;
top: 84px;
bottom: 56px;
width: 100%;
background-color: #222222;
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
}
div.content {
flex-shrink: 0;
width: 600px;
height: 600px;
background-color: darkred;
}<!DOCTYPE html>
<html lang="en">
<!-- omitted head -->
<body>
<header>
</header>
<main>
<div class="content">
<b>Lorem</b> Lots of Lorem ipsum... <b>quod</b>
</div>
</main>
<footer>
</footer>
</body>
</html>What I want to achieve looks more like this: gif animation showing window-resizing and the css behavior
In this example I didn't use flexbox-centering. I wrapped the content within a container that has it's margin set to: 0 auto. This will achieve the wanted behavior on the x-axis, but not the y-axis. How can I achieve this on both axes?
Below the html and css of the second example using a container and auto-margin for centering:
b {
color: white;
}
html {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
margin: 0;
}
header {
position: absolute;
top: 0;
height: 84px;
width: 100%;
background-color: darkolivegreen;
}
footer {
position: absolute;
bottom: 0;
height: 56px;
width: 100%;
background-color: darkslateblue;
}
main {
position: absolute;
top: 84px;
bottom: 56px;
width: 100%;
background-color: #222222;
/* display: flex;
justify-content: center;
align-items: center; */
overflow: auto;
}
div.container {
margin: 0 auto;
width: 600px;
height: 100%;
background-color: #333333;
}
div.content {
/* flex-shrink: 0; */
width: 600px;
height: 600px;
background-color: darkred;
}<!DOCTYPE html>
<html lang="en">
<!-- omitted head -->
<body>
<header>
</header>
<main>
<div class="container">
<div class="content">
<b>Lorem</b> Lots of Lorem ipsum... <b>quod</b>
</div>
</div>
</main>
<footer>
</footer>
</body>
</html>Ah... I hope to find a solution that doesn't use javascript for this behavior. In case I find the solution, I'll post it with a corresponding gif.
