height 100% in a side column in chrome

I'm having a problem with height 100%.

The thing is that I have a list of items that should be distributed in the same height as the side image. When I use fixed height, it works normally, but when I use percentage, it doesn't work.

The problem is that the site is responsive and I can't set a fixed height, because the image wont be fixed.

The code is below

<!DOCTYPE html>
<html>
    <head>
        <title>teste flex box</title>
        <style>
            html,body {
                min-height: 100% !important;
                height: 100%;
            }

            body { margin: 0 }
            * { box-sizing: border-box }
            .container {
                width: 600px;
                margin: auto;
            }
            .row {
                clear: both;
                margin: 0 -15px;
                overflow: auto;
            }
            .lateral, ul {
                width: 50%;
                float: left;
                padding: 0 15px;
            }
            img {
                width: 100%
            }
            ul {
                list-style: none;
                margin: 0;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 356px; /* works */
                height: 100%; /* not working */
            }
            ul li {
                height: 50px;
                background: darkred;
            }
        </style>
    </head>
    <body>
        <div class='container'>
            <div class='row'>
                <div class='lateral'><img src='https://placeholdit.imgix.net/~text?txtsize=33&txt=285%C3%97356&w=285&h=356'></div>
                <ul>
                    <li>item 1</li>
                    <li>item 2</li>
                    <li>item 3</li>
                    <li>item 4</li>
                    <li>item 5</li>
                </ul>
            </div>
        </div>
    </body>
</html>

Anyone knows what is happening? Thank you.

Solution

Try this code below:

  <!DOCTYPE html>
    <html>
<head>
    <title>teste flex box</title>
    <style>
        html,body {
            min-height: 100% !important;
            height: 100%;
        }

        body { margin: 0 }
        * { box-sizing: border-box }
        .container {
            width: 600px;
            margin: auto;
            position: relative;
        }
        .row {
            clear: both;
            margin: 0 -15px;
            overflow: auto;
            position: relative;
            height: auto;
        }
        .lateral, ul {
            width: 50%;
            float: left;
            padding: 0 15px;
        }
        img {
            width: 100%
        }
        ul {
            list-style: none;
            margin: 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%; /* not working */
            position: absolute;
            right: 0;
        }
        ul li {
            background: darkred;
        }

        .clearfix:after {
            clear: both;
            content: ".";
            display: block;
            height: 0;
            visibility: hidden;
        }
        .clearfix {
            display: inline-block;
        }
        .clearfix {
            display: block;
        }

    </style>
</head>
<body>
<div class='container clearfix'>
    <div class='row'>
        <div class='lateral'><img src='https://placeholdit.imgix.net/~text?txtsize=33&txt=285%C3%97356&w=285&h=356'></div>
        <ul>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
            <li>item 5</li>
        </ul>
    </div>
</div>
</body>
</html>