MaterializeというCSSライブラリを使っています。
HTMLのheadで下記のようにMaterializeをCDNから最初に、自分のCSSファイルを後に読み込んでいます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="/styles/styles.css">

Chromeで確認するとmaterialize.min.cssが先に取得され、その後にstyles.cssが取得されています。

しかし、styles.cssでmaterialize.min.cssの属性を上書きしても、materialize.min.cssの属性が適用されてしまいます。具体的には下記のCSSをstyles.cssに追加したところ、この状況になりました。

.card-content{
    max-height: 100%;
}

後に読み込まれた方のCSSで上書きされると考えていましたが、このようなことはなぜおこるのでしょうか。また、後に読み込まれたCSSで上書きするにはどのようにすればいいのでしょうか。