I have a container with elements, each containing an image. I want to arrange these images in the four corners of the container using flexbox. Currently, they are distributing correctly horizontally but not taking up all the available space vertically.
Here is the current layout: https://i.sstatic.net/KkJX6.png
Here is the HTML markup:
<div class="container">
<div class="photo">
<img src="https://placehold.it/180">
</div>
<div class="photo">
<img src="https://placehold.it/180">
</div>
<div class="photo">
<img src="https://placehold.it/180">
</div>
<div class="photo">
<img src="https://placehold.it/180">
</div>
</div>
And the CSS:
div.container {
width: 405px;
height: 405px;
background: rgba(0,0,0,0.1);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
div.photo {
width: 180px;
height: 180px;
overflow: hidden;
border-radius: 5px;
}
img {
height: 100%;
}