I have a comments box that overlaps an image and should remain fixed to the bottom of the image. However, the 'existing-comments-container' keeps stretching to the end of the page instead of just across the width of the image container as expected.
Check out this image for better clarification:
https://i.sstatic.net/Ct7Uk.jpg
Take a look at the relevant HTML code snippet below:
<div class="overlay">
<div class="full-view-container">
<div class="overlay-inner-portrait">
<img [src]="image.imagePath" alt="photo" (click)="closeImage()">
</div>
<div class="existing-comments-container">
<div class="existing-comments" *ngFor="let comment of comments">
<p class="commentor-name">{{comment.name}}</p>
<p class="comment">{{comment.usersComment}}</p>
</div>
</div>
</div>
And here is the relevant CSS styling:
.overlay {
position: fixed;
background: rgba(0, 0, 0, 0.7);
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
z-index: 4;
display: grid;
align-items: center;
justify-items: center;
grid-template-columns: 1;
grid-template-rows: 1;
}
.full-view-container {
display: grid;
grid-column: 1 / -1;
grid-row: 1 / -1;
display: grid;
grid-template: 1fr / 1fr;
}
.overlay-inner-portrait {
background: white;
width: 450px;
height: 580px;
padding: 20px;
grid-column: 1 / -1;
grid-row: 1 / -1;
display: grid;
grid-template: 1fr / 1fr;
align-items: end;
}
.overlay img {
width: 100%;
height: 100%;
}
.existing-comments-container {
display: grid;
grid-template-columns: 1fr;
grid-column: 1 / -1;
grid-row: 1 / -1;
align-self: end;
justify-items: center;
max-height: 100px;
background: white;
}