CSS-如何使h1或p不与文章重叠？

Question

基本上我不希望h1或p都不与文章重叠，而是如果h1或p包含太多，它将向下移至下一行，我不希望p或h1超出尺寸为208x208的文章。

css

.grid {
    display: inline-flex;

}

.grid div {
    margin: 0 30px;
}

.grid .post {
    border: 4px dashed #207420;
    border-radius: 10px;
    text-align: center;
    width: 200px;
    height: 200px;
    box-shadow: 4px 4px 4px 8px rgba(0, 0, 0, 0.26);
}

.grid .post h1 {
    font-family: Arial, Helvetica, sans-serif;
    color: #608658;
    font-size: 18px;
    text-shadow: 2px 2px 4px rgb(0, 0, 0);
}

.grid .post p {
    font-family: Arial, Helvetica, sans-serif;
    color: #417c35;
    margin-top: 50px;
    font-size: 15px;
    text-shadow: 2px 2px 4px rgb(0, 0, 0);
}

posts.ejs

<main>
        <% if (posts.length > 0) { %>

        <% for (let post of posts) { %>

        <div class="grid">
            <div>
                <article class="post">
                    <h1><%=post.title%></h1>
                    <p><%=post.description%></p>
                    <a href="/posts/<%=post._id%>">See Post</a>
                <article>
            </div>
        </div>

        <% } %>
        <%  } else { %>

        <h1 class="no-post">No Posts Found</h1>
        <% } %>
    </main>