Fit content within a div's height while using grid (max-content will not work)

I want the height of my div's to expand according to the text content inside of it, but everything I have tried yields no results. I have looked at pretty much every similar post here on stack overflow and have not come up with any explanation as to why I can not achieve this. I have run into this issue before and could never come to a solution. It occurs when using grid, with a p tag inside of a div. I have tried max-content a couple of different ways (shown in the code below), but no matter how many elements I add it to nothing changes. Also using 100% combined with max-content has yielded no progress either. Any alternative formatting that circumvents this problem in general, but still allows be to have a top border between my two p tags would also be appreciated.

html:

<div id="container" style="display:grid;">
    <img id="logo" class="neu" src="oportunum.png">
    <div id="about" class="neu">
        <p class="headerText">About</p>
        <p class="bodyText">xxx has been serving the scientific and technology sectors for decades.</p>
    </div>
    <div id="services" class="neu">
        <p class="headerText">Services</p>
        <p class="bodyText">Lorem Ipsum. The quick brown fox jumps over the lazy dog. Lorem Ipsum. The quick brown fox jumps over the lazy dog.
            Lorem Ipsum. The quick brown fox jumps over the lazy dog. Lorem Ipsum. The quick brown fox jumps over the lazy dog.
            Lorem Ipsum. The quick brown fox jumps over the lazy dog. Lorem Ipsum. The quick brown fox jumps over the lazy dog.
        </p>
    </div>
    <div id="navigate">
        <p>Contact Information</p>
        <div class="break"></div>
        <p id="contact">Email: Joe@oportunum.com</p><div style="flex-basis: 5%;"></div><p id="contact">Phone: 239-555-5555</p>
    </div>
</div>

CSS:

    body, html {
    margin: 0;
    padding: 0;
}

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

#container {
    margin-left: -2%;
    margin-top: 6%;
    padding: 5%;
    grid-template-areas: 'left middle right' 'navigate navigate navigate';
    gap: 5vw;
    grid-template-columns: 30% 30% 30%;
    grid-template-rows: auto auto;
    width: 100%;
    height: 50%;
}

.neu {
    background: rgba(255,255,255,0.05);
    outline: 1px rgb(146, 146, 146) solid;
    border-radius: 20px;
    filter: drop-shadow(10px 10px 4px rgba(0,0,0,0.4));
    backdrop-filter: blur(6px);
    padding: 20px;
    color: rgb(43, 43, 43);
    transition: 1s;
    resize: height;
    display: inline-block;
    height: max-content;
}

div.neu {
    min-height: max-content;
    height: 12vw;
}

img.neu {
    outline: none;
    margin-top: -30px;
    background: rgba(255,255,255,0);
    max-width: 100%;
    filter: drop-shadow(10px 10px 6px rgba(0,0,0,0.2));
}

.neu:hover {
    filter: drop-shadow(5px 5px 3px rgba(0,0,0,0.4));
    /* margin-top: -10px;
    margin-bottom: 10px; */
}

img.neu:hover {
    filter: drop-shadow(10px 10px 4px rgba(0,0,0,0.2));
}

#logo {
    grid-area: left;
}

#about {
    grid-area: middle;
}

#services {
    grid-area: right;
}

.headerText {
    font-size: 28px;
    margin: 0;
    padding: 0;
    /* height: 100%; */
    word-wrap: break-word;
}

.bodyText {
    font-size: 16px;
    padding-top: 14px;
    border-top: 1px rgb(146, 146, 146) solid;
    /* height: 100%; */
    word-wrap: break-word;
}

#navigate {
    width: 90%;
    height: 10%;
    position: absolute;
    left: 5%;
    bottom: 0px;
    /* background: black; */
    border-top: 1px rgb(146,146,146) solid;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    color: rgb(43, 43, 43);
    font-size: 28px;
    transition: 1s;
}

.break {
    flex-basis: 100%;
    height: 1%;
}

#navigate:hover {
    height: 30%;
}

#contact {
    opacity: 0;
    transition: 1s;
}

#navigate:hover > #contact {
    opacity: 1;
}

Here's a codepen of it: https://codepen.io/explor-ar/pen/xxjZGmY