在CSS网格中重叠和放置元素

Question

我有一个显示现有评论的评论框。这个框应该重叠在一张图片上，并固定在图片的底部，我已经重叠了这个框，但 "现有评论框 "一直延伸到页面的最后。我已经重叠了这个框，但 "现有评论框 "一直延伸到页面的末端。预期的行为是它会延伸到图像容器的宽度。

下面是一张图片，希望能让你更清楚。

下面是相关的HTML

<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>

还有相关的CSS

.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; 
}

Answer 1

我发现这个问题的原因是其中一个用户评论框中的文字非常长，导致框体被拉伸。我通过在p标签上设置一个最大宽度来解决这个问题，这个标签的类是.comment。