使用css网格，如何使子p标签与同一网格中的自动宽度制作子一样？

Question

我有一个.post div，它是display：grid，我将所有列和行自动调整为我img的大小。 img的最大宽度为19em，我不希望.post div超过图像宽度最终的最大宽度，但是当我的p标签太长时，我的div的宽度随着它，超出img宽度。当p标签超出我的img的宽度时，我希望p标签位于它下面的下一行，但我不知道该怎么做。

.post {
  display: inline-grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto;
  border: solid 2px gray;
  margin: 5px 10px;
  grid-template-areas:
  'top top top'
  'name name name'
  'comment comment .';
}

.post > img {
  max-height: 19em;
  max-width: 19em;
  grid-area: top;
}

.post > h3 {
  grid-area: name;
  padding-left: 5px;
  padding-top: 5px;
  color: #0f0;
}

.post > p {
  grid-area: comment;
  padding: 4px 4px 6px 6px;
  white-space: initial;
}

<div class="post">
  <img src="https://placehold.it/600x400" alt="">
  <h3>Heading</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>

编辑：我不想通过在我的图像上自动高度来解决这个问题，因为我的一些图像太大我想将它们的高度限制在19em。如何在不删除图像高度限制的情况下解决此问题？

Answer 1

我通过制作一个容器div并在我的img中使用max-height和min-height来解决这个问题。这是我改变的 -

   <div class='post'>
        <div class='post2'>
           <img src='uploadedFiles/<?php echo $image->image; ?>' alt='$image->id'>
           <h3><?php echo $image->user; ?></h3>
           <p>"<?php echo $image->description; ?>"</p>
        </div>
    </div> 


.post {

    display: inline-grid;

    border: solid 2px gray;

    margin: 5px 10px;

    max-width : 19em;

    text-align: center;

}

.post2 {

    max-width: 19em;

    display:inline-block;
}

.post2 > img {

    max-height: 19em;

    min-width:100%;

    max-width: 100%;

    cursor: pointer; 

}

.post2 > h3 {

    padding-left : 5px;

    padding-top : 5px;

    font-weight: bold;

    color: #00ff00;

}

.post2 > p {


    padding: 4px 4px 6px 6px;

    white-space: initial;

    word-wrap: break-word;

}

Answer 2

只需为整个div设置max-width:19em;宽度。

.post {
    max-width: 19em;
}

我希望这可以帮助你。