PHP mPDF 8 can not set up max-height of an image

I need to make a pdf page where 90% of height will be container div with background with image inside which will fill whole 100% of the container. But it seems it is not possible in mpdf. CSS and html is simple.

<html>
<head>
    <style>
        @page {
            margin-top: 14px !important;
            margin-bottom: 14px !important;
            margin-left: 20px !important;
            margin-right: 20px !important;
        }
        body {
            font-family: Sans-Serif !important;
            box-sizing: border-box;
        }
        .section-header {
            height: 25px !important;
            line-height: 25px !important;
            font-size: 20px;
            margin: 0 0 7px 0 !important;
            padding: 0 !important;
            text-align: center;
        }
        .screenshot-container {
            width: 100%;
            height: 80%;
            max-height: 80% !important;  // This does not work
            background-color: #f4f7fc;
            text-align: center;
            line-height: 100%;
            border: 1px solid red;
        }
        .screenshot-container img {
            height: auto;
            max-height: 80%;
            max-width: 100%;
        }
    </style>
</head>
<body>

<div class="info-container">
    <h1>{$campaign['name']}</h1>
    <div><b><a href="https://portal.lurity.com/campaigns/{$campaign['token']}">Odkaz na detail kampane</a></b><br>
        <div><b>Naplánovanie kampane: </b>{$campaign['date_start']->format('d.m.Y')} - {$campaign['date_stop']->format('d.m.Y')}</div>
        <div><b>Dĺžka kampane:</b> {$campaign['day_diff']} dní</div>
        <div><b>Počet lokalít:</b> {$campaign['location_count']}</div>
        <div><b>Počet obrazoviek:</b> {$campaign['device_count']}</div>
        <div><b>Počet prehratí:</b> {$campaign['impressions']}</div>
        <h2>Celková suma</h2>
        <div><b>Celkom bez DPH:</b> {$budget}{$currency}</div>
        <div><b>Zľava {$discount_sales_percent}%:</b> {$discount}{$currency}</div>
        <div><b>Cena po zľave bez DPH:</b> {$discount_price}{$currency}</div>
    </div>
</div>

<pagebreak />

    <div class="section-header">&nbsp;</div>

    <div class="screenshot-container">
        <img src="var:screenshot" />
    </div>

<pagebreak />
...

Here is the screenshot where you can see red border around the container which should be 80% height.

What is wrong with that? It looks like container ignores its max-height.