I'm currently having a problem where, despite there not being any content present within the div other than the text, there's a lot of whitespace that envelops it and causes the div to grow to take up as much possible space within the parent div.
I've found out that it's a problem to do with the parent .container div class using display: flex;, but I'm not sure how to actually circumvent it, or if there's something I need to apply to the child divs.
Here's the CSS coding for both the .container and the .box classes. Unfortunately, fit-content; did not work on the .box divs either, and instead left large spaces where they would have taken up space instead, as if they had large margins or gaps.
Here is a picture of the website with red outlines around the unwanted space, as well as a Stack Snippet for anyone who might want to see what the code was like before being fixed. Does not have the same colors as the one within the screenshot, but still the same code structure.
body {
background-color: #C2C2C2;
color: #fff;
margin: 0;
display: flex;
justify-content:flex-end;
align-items:center;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.5em;
max-width: 650px;
height: 100vh;
padding: 0.3em;
background-color: #7A7A7A;
border-left: 5px solid;
}
.box {
background-color: #000;
border: 1px solid #fff;
padding: 1rem;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/main.css">
<title>neira's nook.</title>
</head>
<body>
<div class="container">
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit turpis varius est vulputate, in mollis urna vulputate. Nulla facilisi. Vestibulum lacus arcu, pretium in rhoncus in, viverra quis lacus. Integer sed odio tincidunt, maximus metus ut, pharetra metus. Morbi blandit convallis erat, et tempor ante tempor a.
</div>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit turpis varius est vulputate, in mollis urna vulputate. Nulla facilisi. Vestibulum lacus arcu, pretium in rhoncus in, viverra quis lacus. Integer sed odio tincidunt, maximus metus ut, pharetra metus. Morbi blandit convallis erat, et tempor ante tempor a.
</div>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit turpis varius est vulputate, in mollis urna vulputate. Nulla facilisi. Vestibulum lacus arcu, pretium in rhoncus in, viverra quis lacus. Integer sed odio tincidunt, maximus metus ut, pharetra metus. Morbi blandit convallis erat, et tempor ante tempor a.
</div>
</div>
</body>
</html>
