How do I prevent a div from overflowing above the viewport? - html

Question

I have centered a div like this:
<div class="container">
START
{ lorem }
END
</div>
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(65ch, 95vw);
}
This works:
But if I shrink the window, I'll have this:
Where I can scroll down and see the end, but not scroll up and see the start.
Same thing happens horizontally, I can scroll to right but not to left if there's not enough X space.
How do I make translate() move the div down a bit to prevent it from overflowing above the page?

Answer 1

Use flexbox on the body
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
width: min(65vw, 95vw);
margin: auto;
}
<div class="container">
START Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia, accusantium pariatur? Corrupti molestias quas pariatur dolores aperiam! Quam voluptatibus laudantium id et aliquam possimus! Inventore sint, quo quia, autem tenetur unde optio,
totam maiores provident repellendus exercitationem magnam? Quam ad fugit tempore, amet corrupti molestias dolorem voluptas vitae temporibus modi impedit animi neque, sit commodi! Temporibus quo dolores autem nemo architecto culpa laborum, perferendis
a incidunt eius ab molestiae provident ea deleniti. Architecto dignissimos dolorum, autem consequatur alias voluptatem, fugiat porro quo odio, odit consectetur voluptate unde ullam ex magni itaque quam debitis. Asperiores deserunt quos autem animi,
magnam repellendus sequi repudiandae nobis nostrum id aspernatur delectus ut modi saepe voluptates accusantium doloremque ab inventore harum totam expedita, praesentium enim. Adipisci odio minus atque tempore laborum totam quam ipsam maiores a ullam
veniam at, non necessitatibus explicabo itaque quae consequuntur quaerat nostrum laboriosam blanditiis eveniet velit voluptatum. Libero neque sunt voluptatem laboriosam. Earum suscipit odio, rem explicabo quo beatae voluptates veritatis recusandae nam
obcaecati voluptatibus quia deleniti totam accusantium! Maxime earum necessitatibus iste similique perspiciatis, magnam accusamus ducimus animi quos enim eius laboriosam id tenetur molestiae nemo ipsam. Deleniti, maiores. Aliquam, architecto magnam
repudiandae, corrupti alias accusantium, autem dolorum atque officia saepe exercitationem aperiam ullam blanditiis quia? Aspernatur minus voluptas incidunt rerum ratione beatae suscipit earum quo natus nulla corporis praesentium odio officia facere
magnam nesciunt reiciendis veritatis ea fuga, perferendis eaque necessitatibus amet. Tenetur reprehenderit optio laudantium, consequatur omnis ea doloribus eos inventore, deserunt quam, a reiciendis quasi eligendi officia ipsam veniam magnam sint eum
odit nemo iste architecto alias voluptatem. Quae, minus temporibus voluptates tempore numquam dolore id. Incidunt aliquam, voluptatem voluptatibus minima dolorum earum eligendi tenetur rerum debitis id fugiat necessitatibus nobis, repudiandae quidem
sed! Alias illo possimus et. Voluptas, voluptatibus odit? Consequatur, accusantium. Officiis unde reiciendis libero! Doloremque officia animi qui distinctio corrupti molestias mollitia quasi eius exercitationem iure laboriosam aspernatur alias corporis
tempora natus odio quidem numquam voluptates autem dignissimos iste non, eum a. Vero modi aliquid quam voluptate nostrum accusantium harum eius! Reiciendis qui exercitationem autem aliquid ullam nisi labore consequuntur suscipit iusto totam pariatur
ab dolores excepturi cum placeat, iste sunt obcaecati voluptate, atque voluptatem corporis quis! Nihil voluptas labore, molestias aliquam velit nobis atque quasi obcaecati deserunt minima blanditiis similique tempore, dignissimos sint odio corrupti
voluptatem rem repudiandae dolorum explicabo, porro cum pariatur dolorem? Dolor suscipit corrupti consequatur sit non. Dolore recusandae quia ullam quibusdam officiis molestias maxime repellendus, quidem unde excepturi odit corporis ea natus, commodi
reprehenderit quas eius officia. Provident, numquam. Consequuntur eligendi dolores expedita dolorum iure amet voluptate mollitia vero beatae ipsum voluptatum nostrum, ipsa tenetur molestias officiis sunt minima, illum cupiditate. Repellendus, voluptates
ipsa rem nam odit dolore odio qui sunt, praesentium molestiae aliquam exercitationem natus quas quisquam dicta modi fuga accusantium amet animi dolorum hic voluptatum molestias ad? Id amet nesciunt a! Minima consequuntur sapiente, vitae, quas dolorum
nam voluptates doloremque maiores cupiditate necessitatibus, soluta quos? Voluptas est exercitationem magni inventore impedit labore quos officiis adipisci ipsa! END
</div>

Answer 2

Solution - 1
Just add height to your container, and it will work.
.container {
-
-
-
-
-
height: 100%;
}
Solution - 2 (flex)
Adding following CSS would also solve the issue:
body {
display: flex;
justify-content: center;
}
General Solution / Debugging Tricks for CSS
During the use of position absolute / translate property, you need to make sure that you define the height property.
You can always check the box model for your container to debug the issue or at least get some idea of what's going on or what is the problem source, it helps a lot. Most of the small / medium level problems related to CSS can be solved just by examining the box model.
Always, before start writing your CSS, add following:
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
this helps a lot in bigger projects unless you have something else in mind or it also depends on other use-cases, but these are generally preferred by everyone.
For centering your containers, you can also use grid / flex properties which are some of the best ways of alignment in CSS as well.