Controlling the height of a div

I've got some pretty material cards that contain messages. They're in an infinite scrolling feed. The desired behavior is that they'll display the full message after a "more" button is clicked, since the messages tend be very long. Prototyping this behavior, I tried to modify my app to display messages in full length all the time, but I'm having trouble getting the card divs to get any taller than 457px, and I can't figure out why.

Going through Chrome debugger, I can see that the card height is 457px, but it's always grey, indicating it's getting that height from somewhere else. I would like to make the card as tall as its contents.

Here's what I've got:

<div *ngFor="let message of messages">
    <div class="event card" style="margin-left: 65px; width: 550px;">
        <div class="card-header inlineblock" style="text-overflow: ellipses;">
            <div class="card-date text-caption" style="float: right;">{{message.date}}</div>
            <div class="text-title">{{message.subject | titlecase}}</div>
        </div>
        <div class="message inlineblock text-body">
            <div style="text-overflow: ellipses; white-space: pre-wrap; height: auto;">{{message['email-body']}}</div>
    </div>
    <div>
        <hr style="margin: 20px 0 20px 0;"/>
        <span class="text-button" style="padding-left: 20px;">More</span>
    </div>
</div>

This is my very simple card. Here's all the CSS that's mentioned:

.event {
    border-radius: 2px;
    background-color: white;
    margin: 15px 0 0 0;
    padding-bottom: 20px;
    }

.card {
    border-radius: 2px;
    transition: box-shadow .25s;
    background-color: white;
    margin: .5rem 0 1rem 0;
    width: 100%;
    justify-content: center;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,.16), 0 2px 5px 0 rgba(0,0,0,.26)
    }

.card-header {
    width: 100%;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    padding: 8px 20px;
    }

.inlineblock {
    display: inline-block;
    }

.card-date {
    float: right;
    }

.text-caption {
    font-size: 12px;
    font-weight: 400;
    line-height: 32px;
    opacity: .54;
    margin: 0 0 0 0 !important;
    }

.text-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 44px;
    opacity: .87;
    margin: 0 0 0 0 !important;
    }

.message {
    display: block;
    display: -webkit-box;
    padding: 15px 20px 0 20px;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    }

.text-body {
    font-size: 14px;
    font-weight: 400;
    line-height: 25px;
    opacity: .87;
    margin: 0 0 0 0 !important;
    }

text-button: {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 32px;
    opacity: .87;
    margin: 0 0 0 0 !important;
    }

Nothing in there strikes me as causing the height, so I checked a level higher.

It's wrapped in another HTML template:

<div class="feed-container">
    <div class="feed-scroll">
        <messages></messages>
    </div>
</div>

With the following corresponding CSS:

.feed-container {
    width: 630px;
    overflow: hidden;
    }

.feed-scroll {
    min-height: 400px;
    width: 650px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: 10px;
    padding-right: 10px;
    }

The purpose of the container is to allow infinite scrolling with an invisible scrollbar.

Still, nothing strikes me as causing the cards to be limited in height so that the full message is not displayed. If I specify the height of the message's div or its parent, the text just overflows the card. The card doesn't grow to match it.

So I thought perhaps some global styling could be causing this. Here's everything applied:

On the highest div:

* {
box-sizing: border-box;
}

div {
    display: block;
}

body {
    font-family: 'Roboto', arial, sans-serif;
    font-weight: 400;
    color: #212121;
}

On <div class="event card style="margin-left: 65px; width: 550px;">, it's the same as above for *, div, and body.

On <div class="card-header inlineblock" style="text-overflow: ellipsis;"> and <div class="card-date text-caption" style="float: right;">, and <div class="text-title">, it's the same as above for *, div, and body.

So it doesn't seem to be the header that's responsible.

<div class="message inlineblock text-body"> and <div style="text-overflow: ellipsis; white-space: pre-wrap; height: auto;"> don't inherit any additional classes besides *, div, and body.

The <hr/> does inherit several styles, but none that would control height.

The <span> for the button also only inherits the same global classes.

So at this point, I'm very confused why my card won't get taller. I can't see anything restraining it, but no matter how tall I set it explicitly, it won't get any taller than 457px.

Any thoughts as to why?

The {{message['email-body']}} element just overflows into ellipsis no matter what. I can't seem to make the divs any taller.